html - 调整大小而不挤压图像时删除嵌套img下的空白

Question

我正在使用 div 和在流体布局中嵌套的 img 制作基本标题。我对此有点生疏，我无法为我的爱弄清楚如何确保嵌套在 div 中的图像缩放而不缩放到它变得更小的父 div 的点。

编辑：更新了 codepen 链接，显示如何使用 min-height 在压缩图像时不起作用

HTML：

<div class="container">
  <div class="item half">
    <p>
      Some text
    </p>
  </div>
  <div class="item half">
    <img src="http://dummyimage.com/hd1080" class="full-width">
  </div>
</div>

CSS：

.container{
    margin: 0 auto;
    max-width: 1920px;
}

.item{
    height: 300px;
    float:left;
    overflow: hidden;
    background-color: gray;
}

.half{
    width: 50%
}

.full-width{
    max-width: 100%;
}

为了更好地衡量正在发生的事情的快速说明：

并说明我想要发生的事情：

编辑：请注意，此处的图像没有被挤压，如果您将图像设置为具有等于其父 div 的最小高度，则会发生这种情况。但是溢出是隐藏的。您还可以看到我不介意图像被裁剪。

任何帮助表示赞赏。

Answer 1

您可以将等于 div.item 高度的 min-height 添加到图像 CSS

img {
    max-width:100%;
    min-height:300px;
}

Answer 2

我设法在这个线程中找到了我想要的解决方案。我正在寻找的功能是object-fit.

我使用了以下解决方案：

img{
    min-height: 100%;
    object-fit: cover;
}

编辑：很快发现这个属性只被 Firefox、Chrome 和 Opera 正确支持。使用这个 polyfill在 Safari 和 IE 上修复这个问题。