gpt4 book ai didi

html - 在使用 css 调整大小时使元素以图像为中心

转载 作者:太空宇宙 更新时间:2023-11-04 01:00:00 25 4
gpt4 key购买 nike

我必须让一个 div 跟随图像并在响应时垂直和水平地位于其中心。我根本不知道或者不认为它是否只能通过 css 实现。感谢任何帮助

enter image description here

最佳答案

.imageWrapper {
height:200px;
width:200px;
position:relative;
margin:50px auto 0px auto;
}

.imageWrapper > div:first-child {
position:absolute;
z-index:1;
top:0px;
left:0px;
right:0px;
bottom:0px;
overflow:hidden;
}

.imageWrapper > div:first-child img{
height:200px;
width:100%;
object-fit:cover;
position:relative
}

.imageWrapper > div:last-child {
position:relative;
z-index:2;
text-align:center;
line-height:200px;
height:200px;
width:100%;
}
<div class="imageWrapper">
<div><img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Billede_084.jpg"></div>
<div><p>bla bla</p></div>
</div>

做一个环绕的div,把图片做成绝对背景,把文字放在图片前面。

关于html - 在使用 css 调整大小时使元素以图像为中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53643992/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com