如何将 <img> 置于 div 的中心并使其与 div 的高度成比例？

Question

我正在使用居中的 img 作为某些图块的背景。我正在尝试让这些图像与其父级 div 的高度成比例，如果它们比它们的父级更宽，那么它们可以隐藏溢出。

示例：

* 我现在可以使用了。答案在下面，我正在更新此代码以显示我需要用来让它工作的所有内容 *

HTML

<div class="container">
    <img class="derp" src="http://gridiculo.us/images/kitty02.jpg">
</div>

CSS:

.container {
    height:250px;
    width:50%;
}
.derp{
  object-fit: cover;
  height: 100%;
  width: 100%;
}

这是一个近似的例子：http://codepen.io/chriscoyier/pen/myPMGB

不同之处在于我使用的是 s 而不是背景图像，而不是 img 完全填充 div 它会适合高度并隐藏宽度溢出。

我尽量避免使用背景图片，因为我使用了很多这样的图块，并且为每个图块制定 CSS 规则是行不通的。

Answer 1

为了根据 div 的高度缩放它，我将高度从 px 更改为 % - 这样，较大的 [=23= 】，图片越大。为了确定图像，我会在图像中使用边距 css。看起来像这样：

    .derp{
        height:80%;
        width:80%;
        margin:10%;
     }
.container {
    height:250px;
    width:50%; /* needed */
    /* inner img is centered horizontally */
    vertical-align:top;
    text-align:center;
    overflow-x:hidden;
}

<div class="container" style="background-color:gray"> <!-- The background is there so you could see the image relative to the div -->
    <img class="derp" src="http://gridiculo.us/images/kitty02.jpg">
</div>

Answer 2

根据您需要支持的浏览器数量，我建议您使用object-fit！对它的支持是 okay if you can ignore IE, but in case your project qualifies, I see no problem with using it today. Also, there is always a polyfill.

您可以找到关于属性的精彩摘要 on CSS-Tricks.com。它基本上与 background-size 类似，但适用于 <img> 标签。在你的情况下，object-fit: cover; 就可以了。

我在 CodePen 上制作了 a little demo，向您展示了它是如何工作的。

img {
  height: 100%;
  object-fit: fill;
  width: 100%;
}

Answer 3

保持图像纵横比的最佳方法是将宽度设置为自动（这是默认行为，因此您无需明确设置）。通过一个简单的 overflow:hidden，它几乎可以如您所愿地工作。

困难的部分是水平居中。你可以试试这个答案：css to center a image horizontally。

但是，如果您的所有图片尺寸不同，您将需要为每张图片制定一条规则。在这种情况下，将图像设置为 background-img 对于语义和可访问性会更好（因为您的图像在页面中没有意义，它不传达任何信息，它是装饰）。 <img> 将被屏幕 reader（alt 属性）读取，在您的情况下，它不会帮助盲人。

如何将 <img> 置于 div 的中心并使其与 div 的高度成比例？

How can I center an <img> inside a div and have it scale with the div's height?

css

hidden

image

center

overflow