如何使用overflow：hidden？垂直居中并裁剪图像？

Question

我正在尝试显示预设的图像大拇指而不拉伸或缩小图像。我的HTML看起来像这样：

<div class="container">
    <img src="photo.jpg" alt="Test Photo" class="clipped" />
</div>

我的CSS：

.container{
    height: 75px;
    width: 75px; 
    overflow: hidden;
}

.container img.clipped {
    width: 100%; 
}

我希望在下面的75 x 75像素容器中看到图像的中心，即垂直居中。

知道我缺少什么吗？

Answer 1

图像从框的左上角开始调整大小，因此仅剪切其底部。

您可以实现将图像移动到背景的结果：

Demo - 警告：无法在IE8上运行

HTML：

<div class="container"></div>​

CSS：

.container{
    height: 75px;
    width: 75px; 
    overflow: hidden;
    background:url(photo.jpg) left center no-repeat;
    background-size:75px auto; /* or background-size:100% auto; */
}​

---

要将此方法应用于多个容器，可以将其拆分为两个类：

.container {
    height: 75px;
    width: 75px; 
    overflow: hidden;
}​

.myPic {
    background:url(photo.jpg) left center no-repeat;
    background-size:75px auto; /* or background-size:100% auto; */
}

然后你可以：

<div class="container myPic"></div>​
<div class="container2 myPic"></div>​
<div class="container myPic2"></div>​
<div class="container2 myPic2"></div>​

......等等。

或者您可以使用内联样式设置背景图像：

.container {
    /* same stuff */
    background-position: left center;
    background-repeat: no-repeat;
    background-size:75px auto; /* or background-size:100% auto; */
}

和

<div class="container" style="background-image:url(photo.jpg);">
<div class="container" style="background-image:url(photo2.jpg);">

Answer 2

我没有一个纯粹的CSS解决方案，而且我不确定你的HTML会有一个相当简单的尺寸，但是使用javascript你可以做到这一点（如果你不喜欢，请适应vanilla不使用jQuery：

$('.container').each(function(){
    var $img = $(this).find('img');
    $(this).scrollTop(($img.height()-$(this).height())/2);
    $(this).scrollLeft(($img.width()-$(this).width())/2);
});​

Demonstration

Answer 3

支持translateY的现代浏览器的一种方式。

.clipped {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

jsFiddle示例：http://jsfiddle.net/5qts9jt5/130/

Answer 4

.container {
  line-height: 73px;
}
.container img.clipped {
  vertical-align:middle;
}