1

我正在尝试在不拉伸或缩小图像的情况下显示预设的图像缩略图。我的 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 像素的容器中看到图像的中心，如下所示，即垂直居中。

在此处输入图像描述

知道我错过了什么吗？

4

4 回答 4

6

图像从框的左上角开始调整大小，因此只有底部被剪掉。

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

演示-警告：不适用于 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);">
于 2012-10-05T19:58:22.010 回答
2

我没有纯 css 解决方案，而且我不确定无论尺寸如何，您的 HTML 都会有一个相当简单的解决方案，但是使用 javascript 您可能会这样做（如果您不使用 jQuery，请适应vanilla ）：

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

示范

于 2012-10-05T19:57:29.310 回答
1

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

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

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

于 2015-06-27T20:16:42.907 回答
0 
.container {
  line-height: 73px;
}
.container img.clipped {
  vertical-align:middle;
}
于 2012-10-05T19:51:17.080 回答