gpt4 book ai didi

css - 如何使用CSS定位不同大小的图像?

转载 作者:行者123 更新时间:2023-11-28 11:55:43 25 4
gpt4 key购买 nike

我有两张宽度和高度不同的图片,需要将它们放在图片框的底部居中位置。这是 HTML 和 CSS 示例。

<div class="box">
<div class='image'>
<img alt="" src="image.jpg"/>
</div>
</div>

.box {
max-width: 970px;
height: 440px;
}
.box img {
max-width: 100%;
position: absolute;
bottom: 8px;
margin-left: auto;
margin-right: auto;
}

此代码适用于精确宽度和高度的大图像。但是,当将较小的图像放置在图像框中时,该图像位于右下角的中央。如何使两个图像都居中底部?

感谢大家的帮助!

最佳答案

给你...我会尽量解释,但简短的回答,a fiddle

.box {
/* Just so I could see the parent */
background-color: #bada55;
max-width: 970px;
height: 440px;
/* Needed to make this element positional (so it will contain the absolutely positioned child */
position: relative;
/* Yep, center wasn't necessary here... */
}
.box .image { /* move this to the image wrapper */
position: absolute;
bottom: 8px;
/* Force full width */
left: 0;
right: 0;
/* Center contents (the image) */
text-align: center;
}
img {
max-width: 100%;
}

关于css - 如何使用CSS定位不同大小的图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20110520/

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