Css 在较小的分区中垂直居中图像（多个缩放图像、多个分区）

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

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

JSFIDLE示例如下：

.container{
填充：9px；
边框：1px实心#b8b8；
宽度：262px；
利润率：10px；
}
.集装箱img{
显示：块；
宽度：100%；
}
.图像框{
溢出：隐藏；
高度：172px；
}

---

这是一个非常简单的解决方案

您所要做的就是不使用img标记，而是按照您希望的图像大小创建一个div。例如200px 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>

您正在处理两个非常不同的图像方向。第一个是自然景观，考虑到你制作的容器，尺度很好。第二种是肖像画，它的高度/宽度使它很难装在容器里

我看不出有一套样式可以让这两种方式都按您想要的方式工作（除非您在图形编辑器中将图像#2裁剪为横向）

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



这对我起了作用

如果您发现您有许多这样的“肖像样式”图像，那么在CSS中创建一个类（如.img grait或其他）并将其应用于您遇到问题的图像可能是值得的，以避免您需要执行的所有内联样式：

像
或类似的东西。
一个选项是使用图像作为
图像框的背景，而不是将
标记作为
图像框的子项。您只需设置：


背景图片：url（blah）

背景尺寸：100%

背景位置：居中


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

A.
使用这种方法，您肯定会隐藏图像的底部而不是顶部？这实际上非常有效。这正是我想要做的。第二个图像垂直居中，即使对每个图像应用相同的CSS，顶部图像也不会被修改。非常感谢。css的一个更通用的版本是：页边距顶部：-50%；这对于第二个图像非常有效，但是如果我对第一个图像应用相同的内联样式，它会将图像几乎完全移出容器，然后不要将其添加到第一个图像中。这就是内联样式的美妙之处。它只适用于你应用它的元素，这是真的。问题的背后还有一点。我不想混淆我遇到的问题，但是在数据库查询生成的3x4网格中，每页将有12个图像，因此我希望能够对每个图像使用相同的代码。当我在URL中循环时，我可以自动为每个结果生成代码。如果我有一些静态图像，你的解决方案会很好。谢谢谢谢你的建议。我在其他几个例子中看到了背景图像的使用位置，但它看起来很混乱。如果是这样的话，我会走这条路。谢谢你。背景图片是我在发布问题之前在搜索中看到的项目之一。这看起来相当冗长，但如果我能做的就是这样的话，我可能会深入研究这个解决方案。
<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>

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