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

Question

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

Answer 1

123456img{  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：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。&nbsp;