img需要宽高都固定时,图片往往会因此变形,此时可采用的方法有:
<div class="imgsty"> <img src="http://images.9liuda.com/image/201807/20/3bad7b83de0656dcb1c3af07d0675c67">
</div>
<style>
.imgsty{ overflow: hidden; position: relative; width: 200px; height: 200px; background:black;}.container > img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }//top: 50%;left: 50%;, 是以左上角为原点,故不处于中心位置
//translate(-50%,-50%) 作用是,往上(x轴),左(y轴)移动自身长宽的 50%,以使其居于中心位置
</style>
温馨提示:
上述代码会使得图片居中,边缘部分不显示。这是在图片大小跟container大小差不多的情况下。如果图片很大的话,只显示中心部分是不行的。
此时,设置width:100%;或者height:200px;都可以。
设置width百分之百,会让高都裁剪或填充黑色。设置height固定值会让宽度裁剪或填充。
小伙伴们 如果帮到您了,帮忙点个关注哈,日后给您提供更多更有用的解决问题方案