如何解决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
属性在左侧或右侧,顶部或底部开始图像
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。