请教如何用CSS控制图片宽度和高度，使图片不变形

html-css014

请教如何用CSS控制图片宽度和高度，使图片不变形,第1张

宽度和高度不要同时设置，只需要设置一个，另一个就会自动按照图片的原始比例进行缩放，从而使图片不会发生变形。如果情形比较复杂，比如预先不知道图片是宽大于高还是高大于宽，又想把图片控制在某个范围内（比如正方形），就要结合JavaScript脚本才能实现了（网上大把代码，自己百度）。或者也可以把图片搞成背景图，然后利用css3的background-size属性来让图片保持原始比例，这样就无需借助js，缺点就是浏览器必须支持css3

要控制图片的大小，必须得先知道这张图片是以什么形式展现的：

1.<img>导入

2.background-image.

就只有这2种方法，即使是用JS或者其他语言来控制，也是万变不离其宗，这两种方法就是本质。

对于第一种(<img>)，控制大小可以通过外框设置宽度，然后img用100%来适应外框（这样子，图片会根据width来自动调整图片，如果长、宽都设死了，那么图片一般都会出现变形），当然纵向也是同理可以执行的。

第二种的话(background-image)可以通过：

background-size来自适应大小。样式有4个属性：

length：

设置背景图像的高度和宽度。

第一个值设置宽度，第二个值设置高度。

如果只设置一个值，则第二个值会被设置为 "auto"。

测试

percentage：

以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度，第二个值设置高度。

如果只设置一个值，则第二个值会被设置为 "auto"。

测试

cover

把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。

测试

contain：

把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。