<div style="height:270px;400px;border:2px black solid;"> <img src="..."> </div>
object-fit解决方法:
直接给img套用一个object-fit:cover;让img填满盒模型。
div img{ width: 100%; height: 100%; object-fit:cover; }
这个方法很简单也很实用,也符合理论上对盒模型和IMG容器的解释。因为img本来也是一个容器,只不过它是公认的用来引导图片的容器,用替换法把图片替换成覆盖的尺寸就是我要的效果。这个思路在理论上都是正确的。
但由于是新代码,在一些浏览器上还不兼容。回退机制上,如果浏览器不认识object-fit,那整个图片就会被强制拉伸成容器的尺寸。所以在回退机制上有待解决!