在较小的 div 中垂直居中图像（多个缩放图像，多个 div）

Question

我有两张图片。一个是 630x419；另一个是 200x300。

我将这些图像中的每一个都显示在容器 div 中，容器上的宽度固定。我将图像缩放到容器 div 内的宽度：100%。两个图像都会缩放以填充 div 宽度，但高于宽度 (200x300) 的图像会溢出 div 容器的底部。我已将溢出设置为隐藏，但我想做的是在 div 中垂直居中图像，这样我就可以看到图像的中心而不是图像的顶部，而不会弄乱第一个的缩放或显示图片。

此处为 JSFiddle 示例：http://jsfiddle.net/P7xNg/1/

.container {
  padding: 9px;
  border: 1px solid #B8B8B8;
  width: 262px;
  margin: 10px;
}

.container img {
  display: block;
  width: 100%;
}

.image-box {
  overflow: hidden;
  height: 172px;
}

<div class="container">
  <div class="image-box">
    <img src="http://i.imgur.com/lG43Qgd.jpg" />
  </div>
</div>

<div class="container">    
  <div class="image-box">
    <img src="http://i.imgur.com/bMfYu6M.jpg" />
  </div>
</div>

Answer 1

.image-box {
    overflow: hidden;
    height: 172px;
    position: relative;
     margin-left: auto;
     margin-right: auto;
     overflow: hidden;

}
.image-box img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

http://jsfiddle.net/P7xNg/2/

Answer 2

这里为您提供了一个不错的简单解决方案。

您所要做的就是不使用 img 标签创建一个您希望图像大小的 div。例如; 200 像素 x 200 像素。然后将要用作背景图像的图像分配给该div，然后将图像偏移-100px。

下面的内联示例：

<div class="container">    
    <div class="image-box">
        <div style="width:100%;height:200px;background-image:url(my-image.jpg);background-repeat:no-repeat;background-position:-100px 0px;
    </div>
</div>

我希望这会有所帮助！

Answer 3

您正在处理两种截然不同的图像方向。第一个是自然景观，根据您制作的容器可以很好地缩放。第二个是本质上的肖像，它的高度/宽度使其难以适应容器。

我认为没有一种样式可以让两者都以您想要的方式工作（除非您在图形编辑器中将图像 #2 裁剪为横向）。

为您的第二张图片添加一些内联 CSS 样式（在 HTML 中）：

<div class="container">    
    <div class="image-box">
        <img src="http://i.imgur.com/bMfYu6M.jpg" style="margin-top:-120px;"/>
    </div>
</div>

这对我有用。

如果你发现你有很多像这样的“肖像风格”图像，那么在你的 CSS 中创建一个类（如 .img-portrait 或其他东西）可能是值得的，并将其应用于你遇到问题的那些与，以使您免于需要做的所有内联样式：

像<img src="http://i.imgur.com/bMfYu6M.jpg" class="img-portrait"> 或类似的东西。

Answer 4

一种选择是将图像用作.image-box 的背景，而不是将<img> 标记作为.image-box 的子标记。你只需要设置：

• background-image: url(blah);
• background-size: 100%;
• background-position: center center;

但是，生成的 HTML 并不像它可能需要一些通常不是最好的内联样式那样干净。

jsfiddle。