怎样用css控制图片自适应大小？

Question

怎样用css控制图片自适应大小？

Answer 1

1 2 3 4 5 6

img{   width:auto;   height:auto;   max-width:100%;   max-height:100%; }

这样可以使图片自适应容器的大小，但前提是图片所在的容器自身有一定的尺寸

 

Answer 2

用CSS是无法很好的控制图片自适应的，因为通常页面放大缩小只是横向的变化，而高度是不变或者相对不变的，而图片想自适应必须设定一个百分比的宽度和高度，当只有横向变化的时候，图片当然可以自动的变化自适应，但相应的图片也会变形，如果无关紧要的话可以这么弄，但如果图片是展示性的图片时变形就会很难受，绝对不能这么做！
不过可以用js控制

Answer 3

要控制图片的大小，必须得先知道这张图片是以什么形式展现的：
1.<img>导入

2.background-image.

就只有这2种方法，即使是用JS或者其他语言来控制，也是万变不离其宗，这两种方法就是本质。
对于第一种(<img>)，控制大小可以通过外框设置宽度，然后img用100%来适应外框（这样子，图片会根据width来自动调整图片，如果长、宽都设死了，那么图片一般都会出现变形），当然纵向也是同理可以执行的。

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

background-size来自适应大小。样式有4个属性：
length：
设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。
测试
percentage：
以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。
测试
cover
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
测试
contain：
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。