html - 调整大小时删除嵌套 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;
}