图像没有用 div 正确调整

Question

我很难让我的图像与我的 div 一起伸展。宽度按预期响应，但高度未达到 div 的底部，因为它随着窗口屏幕变小而在高度上扩展。

HTML：

<div class="post-container">
        <div class="post-thumb">
            <img src="JKPWQF96-G01-121526-500px-650px.jpg" alt="client">
        </div>
        <div class="post-content">
            <h1>Nathan Bayne</h1><br>
            <h2>Software Developer</h2><br>
            <p>This is dummy text!</p><br>
            <p>This is dummy text!</p><br>
            <p>This is dummy text!</p>
            <a href="#" class="button instagram"><span class="gradient"></span>Full Bio</a>
            <a href="#" class="button2 instagram"><span class="gradient"></span>Contact</a>
            <div class="social-buttons">
                <a href="#"><i class="fab fa-twitter"></i></a>
                <a href="#"><i class="fab fa-instagram"></i></a>
                <a href="#"><i class="fab fa-youtube"></i></a>
                <a href="#"><i class="fab fa-linkedin-in"></i></a>
            </div> 
        </div>
        <div class="copyright">
            <p>© Nathan Bayne, 2020. All rights reserved.</p>
        </div>
</div>

CSS：

/*Sets colour, width, border, height and margins of the main div where the image and text are within*/
.post-container {
    background-color: #000;
    width: 70%;
    margin: 3% 15% 3% 15%;
    height: 100%;
    border: 1px solid #FFFFFF;
}

/*Makes adjustments to width of the main image (covers 35% of post-container div)*/
.post-thumb {
    width: 35%;
    height: 100%;
    float: left;
}

/*Makes adjustments to the image and allows the image to be outwith the div space to allow a higher quality image*/
.post-thumb img{
    width: 100%;
    height: 100%;
    background-size: 100%;
    object-fit: cover;
    border: solid #FFFFFF;
    border-width: 0px 1px 0px 0px;
    display: block;
}

这是当前屏幕的样子：

Answer 1

您可以使用object-fit: cover; 作为您的图像。 它将图像与其容器相匹配。

Answer 2

和 Ali Bahaari 一样，您可以使用 object-fit cover 将图像完全适合 div，但可能会在左侧或右侧裁剪图像，您可以使用 object-fit: contain，其中包含您的整个图片。 如果你object-cover 使用object-position 属性在左侧或右侧或顶部或底部开始您的图像

Answer 3

查看您的演示后，我认为 float 布局有问题。我强烈建议您使用 flex 布局而不是浮动。试试下面的代码：

HTML：

<div class="layout">
    <div class="post-thumb">
        <img src="xxx.jpg" alt="client">
    </div>
    <div class="post-content">
    </div>
</div>

CSS：

.layout {
  display: flex;
  flex-flow: row nowrap;
}

.post-thumb {
  flex: 1;
}

.post-content {
  flex: 2;
  font-size: 30px;
  color: white;
  margin: 5% 5% 0% 5%;
}

现在，我们的布局是这样的，我认为对于网站来说这是一个合理的布局。

如果要强制图片延伸到底部，指定如下css（强制图片框占据版权高度）：

.post-thumb {
  flex: 1;
  margin-bottom: -40px
}

但我不得不说这是一种解决方法。 正确的做法是把网站排成如下图，然后图片自然地填满整个左边。