gpt4 book ai didi

html - 使图像适应容器大小

转载 作者:太空宇宙 更新时间:2023-11-03 20:31:01 26 4
gpt4 key购买 nike

我有一个网页,我在缩略图中显示了很多图像,所以我为所有缩略图定义了大小:

enter image description here

然后,加载到该容器中的图像可以更高或更宽,所以我希望它能够正确显示。例如:如果图像较高则应居中显示:

enter image description here

那么,如果图片比较宽,应该是:

enter image description here

目前图像填满了整个容器,所以有些图像没有按预期显示,有些变长了,还有一些太宽了。提前致谢!

最佳答案

这会有所帮助

flex-box 解决方案

div {
height: 300px;
width: 300px;
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
}
img {
max-height: 100%;
max-width: 100%;
}
<div><span><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=150%C3%97300&w=150&h=300"></span></div>
<div><span><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=550%C3%97200&w=550&h=200"></span></div>

display:inline-block 解决方案

div {
height: 300px;
width: 300px;
border: 1px solid;
text-align: center;
}
div:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
max-height: 100%;
max-width: 100%;
vertical-align: middle;
}
<div><span><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=150%C3%97300&w=150&h=300"></span></div>
<div><span><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=550%C3%97200&w=550&h=200"></span></div>

关于html - 使图像适应容器大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41936804/

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