div 图像未正确调整

Question

我正在努力尝试让我的形象与我的 div 一起伸展。宽度按预期响应，但高度未达到 div 的底部，因为它随着 window 屏幕变小而扩展高度。

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 封面使图像完全适合 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（强制图片框占据Copyright的高度）：

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

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

div 图像未正确调整

Image isn't adjusting properly with div

html

css

image

responsive-images

responsive