前端css图片固定宽高问题

img需要宽高都固定时,图片往往会因此变形,此时可采用的方法有:

.container { 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%,以使其居于中心位置

上述代码会使得图片居中,边缘部分不显示。这是在图片大小跟container大小差不多的情况下。如果图片很大的话,只显示中心部分是不行的。
此时,设置width:100%;或者height:200px;都可以。
设置width百分之百,会让高都裁剪或填充黑色。设置height固定值会让宽度裁剪或填充。

你可能感兴趣的:(前端css图片固定宽高问题)