Question

我使用居中的imgs作为一些瓷砖的背景。我试图让这些图像按照父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

根据您需要支持的浏览器数量，我建议您使用对象！支持它是okay if you can ignore IE，但是如果您的项目符合条件，我认为今天使用它没有任何问题。此外，始终有polyfill。

您可以找到关于该物业的精彩摘要on CSS-Tricks.com。它基本上与背景大小类似，但适用于<img>标记。在您的情况下，object-fit: cover;可以解决问题。

我在CodePen上发了a little demo，告诉你它是如何工作的。

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

Answer 2

为了使用div的高度来缩放它，我将高度从px更改为% - 这样，div越大，图片就越大。为了确定图像，我在图像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 3

保持图像宽高比的最佳方法是将宽度设置为自动（并且它是默认行为，因此您不需要明确设置）。使用简单的overflow:hidden，它几乎可以按照您的需要运行。

硬部分水平居中。您可以尝试以下答案：css to center a image horizontally。

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

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

3 个答案: