我正在尝试找到一种方法来裁剪和调整图像大小以适应其容器而不会失真。我已经设置了容器的高度，所以图像必须 100% 填充这个高度，并且图像的中心必须与容器的中心相匹配。
这是我的 html：
<div class="container">
<img src="image.jpg" class="img-responsive">
</div>
这是 CSS：
.container {
overflow: hidden;
position: relative;
height: 280px;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
这种技术效果很好：
.container {
overflow: hidden;
position: relative;
height: 260px;
width: 358px;
}
.img-responsive {
position: absolute;
width: auto;
height: 100%;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句