在不调整图像的情况下调整大小时，在嵌套的img下删除空白区域

Question

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

EDIT: Updated the codepen link showing how using min-height won't work as it squeezes the image

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

我设法在this帖子中找到了我想要的解决方案。我正在寻找的功能是object-fit。

我使用了以下解决方案：

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

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