css图片经过放大效果，css如何让图片放大不变形

如何在HTML中用CSS对图片进行缩放

1、可以通过background-size属性来设定背景图片的大小。它可以是像素（px）或者是百分比(%)，举例说明：background-size：950px*200px这表示把背景图片大小调整为宽度950像素，高度200像素。

2、通过css引入的图片，可以通过background-szie属性调整图片大小，background-size的语法如下，可以通过length，percentage，cover及contain四个之中的任一个来调整整改尺寸。

3、html图片按屏幕大小等比例缩放若浏览器允许可按Ctrl+鼠标滚轮滑动缩放，或用代码。

4、首先，打开html编辑器，新建html文件，例如：index.html。在index.html中的style标签中，输入css代码：body {background： url(image.jpg) no-repeat； background-size： 300px}。

5、当遇到这样的DIV CSS布局时候，其实非常简单，我们只需要对图片宽度进行控制，而图片高度不用设置即图片高度会自动适应缩放比例（不设置高度即高度值默认为auto自适应）。

6、html插入图片有两种方式：一种是通过标签插入的正常的图片，另一种是通过css样式插入的背景图片。问题分析： 首先你是通过第二种方式插入的是背景图片，直接用width和height只能控制div的宽度和高度。

相关问答

Q1: css如何实现鼠标滑过缩略图时放大图片

要实现鼠标放在block上以中心为原点进行放大，可以利用CSS3的transform和transition来实现 CSS3的transform： scale()可以按比例放大或缩小block的功能。

首先，打开html编辑器，新建html文件，例如：index.html。

用js，先是一个小图片（缩略图），onMouseOver时触发js写的Function，当然Function中是处理方法。这只是简单思路，至于怎么写网上有很多类似的代码可以供你copy了，自己找找。

当鼠标在原图上移动时，通过对大图进行绝对定位来显示对应的部位，实现类似放大镜的效果。【图片加载】程序初始化时会先执行_initLoad程序，主要用来载入图片。由于img在载入之前获取尺寸是不准确的，所以相关参数的计算都要等到图片加载之后。

Q2: 用css怎么做DW5的当鼠标经过图片图片放大离开变回原形的效果?

1、比如楼上说的：dreamweaver cs5 中， 插入——图像对象——鼠标经过图像.可以设置。还有可以使用“层”+“行为--显示和隐藏”的功能制作；可以利用网上的很多现成的代码，比如很多“js源码站”的代码，下载之后就可以使用。

2、菜单的“图像对象”下选择“鼠标经过图像”，如下图所示。在弹出框中可以看到“原始图像”和“鼠标经过图像”项。选择好网页中初始显示图像和鼠标滑过是出现的图像后，点击确定按钮。这时就设置好此效果了。

3、本篇文章给大家带来的内容是关于css3中如何利用transition实现鼠标悬停的时候div的颜色、高度和宽度都改变的效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

4、有三种方法：一种是：先做两张同尺寸图片，其中一张的内容被压小，周边留白。在网页中插入一个链接，把它撑大，链接属性中有一般背景和鼠标效果背景，把那两张图设进去即可。另一种是纯CSS：为了兼容，需要配合A标签。

css图片经过放大效果的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css如何让图片放大不变形、css图片经过放大效果的信息别忘了在本站进行查找喔。