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，而不是使用img标签。例如; 200px x 200px。然后将要用作背景图像的图像分配给该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裁剪为横向）。

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

<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并不是那么干净，因为它可能需要一些通常不是最好的内联样式。

A jsfiddle。

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

4 个答案: