在不压缩图像的情况下调整大小时删除嵌套 img 下的白色 space

Question

我正在制作一个基本的 header，使用 divs 和一个流动布局中的嵌套 img。我对此有点生疏，我不能为了我的爱弄清楚如何确保嵌套在 div 中的图像缩放而不缩放到它变得更小的程度 parent 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%;
}

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

以及我想要发生的事情的说明：

编辑：请注意这里的图像不是被压缩，如果您将图像设置为 min-height 等于它的 [=41] 就会发生这种情况=] div。而是溢出是隐藏的。您还可以看到我不介意图像被裁剪。

感谢任何帮助。

Answer 1

您可以为图像添加等于 div.item 高度的最小高度 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 上修复此问题。

在不压缩图像的情况下调整大小时删除嵌套 img 下的白色 space

Removing white space under nested img when resizing without squeezing image

html

css

fluid-layout

fluid-images