web开发中如何做到图片自适应？

[酱油瓶子2015]

图片宽度与高度是随机的;
然后图片外面的层占整个屏幕的一半，高度固定，这样的话，在大屏的手机中显示的图片为正方形，
请问怎样才能做到图片外面的层按正方形等比例缩放。

[licanhome]

background-image: url("Image/redVoucher.png"); background-repeat: no-repeat; background-size: cover; 这个css样式就可以自适应的

[滴滴月空雨]

楼上正解，background-size:cover的简写；表示“将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。”

[酱油瓶子2015]

引用 1 楼 licanhome 的回复:

background-image: url("Image/redVoucher.png"); background-repeat: no-repeat; background-size: cover; 这个css样式就可以自适应的

嗯 ，谢谢，不是背景图片，是产品列表的图片，用户上传的产品图片大小不一样， 所以在列表显示的时候，较难统一控制 如果将放图片的层宽度设为自适应的话，那么列表中的所以产品将 高度不一，如果将图片外的的容器宽度固定的话，那么到更大的屏幕中，显示的就为长方形了。

[酱油瓶子2015]

引用 2 楼 liyuedan 的回复:

楼上正解，background-size:cover的简写；表示“将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。”

谢谢你，不是背景图片的，是产品图片

[licanhome]

引用 3 楼 u012959786 的回复:

[quote=引用 1 楼 licanhome 的回复:] background-image: url("Image/redVoucher.png"); background-repeat: no-repeat; background-size: cover; 这个css样式就可以自适应的

嗯 ，谢谢，不是背景图片，是产品列表的图片，用户上传的产品图片大小不一样， 所以在列表显示的时候，较难统一控制 如果将放图片的层宽度设为自适应的话，那么列表中的所以产品将 高度不一，如果将图片外的的容器宽度固定的话，那么到更大的屏幕中，显示的就为长方形了。[/quote]那只能裁剪一下图片在放到产品列表上

[azi_4]

以外层的高度为基础等比缩放： <img src="..." height="100%" / > 以外层的宽度为基础等比缩放： <img src="..." width="100%" / >

[啪滋啪滋书生]

bootstrap 框架里面有个response