div的图像调整不正确

问题描述

我正在努力使自己的形象与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;
}

这是当前屏幕的外观：

解决方法

查看演示后，我认为浮动布局存在问题。我强烈建议您使用 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
}

但是我不得不说这是一种解决方法。 正确的方法是按照以下方式布置网站，然后将图像自然地填充到整个左侧。

,

您可以将object-fit: cover;用于图像。 它使图像适合其容器。

,

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