如何使用 CSS 以固定高度裁剪、调整大小和居中 <img>

Question

我正在尝试找到一种方法来裁剪和调整图像大小以适合其容器而不失真。我已经设置了容器的高度，所以图像必须填充 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;
}

Answer 1

这项技术效果很好：

.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%);
}

如何使用 CSS 以固定高度裁剪、调整大小和居中 <img>

How to crop, resize and center an <img> with a fixed height using CSS

css

image

crop