CSS :如何根据图片本身的大小而不是容器来调整图片的大小
我遇到了这个问题：CSS image resize percentage of itself?
但在我的情况下，什么都不起作用。
我有4个图像，我想放在一个容器内。我试着将它们放在另一个div容器中，然后以%为单位调整它们的宽度，但它一直在根据父对象的宽度进行调整。
我的解决方案是继续使用img的宽度%来获得我想要的。我把它们做成了弹性物品。
有没有办法根据图片本身的大小来调整图片的大小？
我想要的是，如果我进入img { width : 50%;}，我希望它是50%，如果图像。而不是容器。我已经在我的代码中尝试过这种方法，但没有成功。
我可以想象有一个固定宽度的容器会让它工作，但是这个width : max-container or fit-content怎么样?看起来不像我想的那样。
.terms-of-service h2 {
text-align: left;
}
.terms-of-service p {
margin: 5px;
padding-left: 5px;
}
.small-logos {
display: flex;
width: max-content;
justify-content: space-evenly;
}
.small-logos img {
width: 15%;
}<div class="terms-of-service col-content">
<h2>Terms of Service</h2>
<p>This site uses cookies. By continuing to use this site you are agreeing to our use of cookies. Please refer to <a href="#">Google's Privacy Terms</a> and <a href="#">Terms of Service</a> to see how cookies are used.</p>
<div class="small-logos"><img src="https://www.sabico.com/wp-content/uploads/2012/12/slocaliza2.jpg" alt="BBB"><img src="https://www.sabico.com/wp-content/uploads/2012/12/slocaliza2.jpg" alt="25y"><img src="https://www.sabico.com/wp-content/uploads/2012/12/slocaliza2.jpg" alt="green"><img src="https://www.sabico.com/wp-content/uploads/2012/12/slocaliza2.jpg"
alt="Env"></div>
</div>
回答 2
Stack Overflow用户
发布于 2021-11-11 01:38:25
你试过网格吗？在网格中，设置项的百分比宽度将使其成为网格为该项分配的宽度的百分比。
.container {
display: grid;
grid-template-columns: repeat(4, 1fr); // 4 equal grid items
.image {
width: 100%; // image will 25% of container
}
.halfWidthImage {
width: 50%; // image will be 12.5% of container. half the width of it's allocated grid space
}
}这并不完全是您想要的，但我相信这是使用纯CSS时最接近的结果
Stack Overflow用户
发布于 2021-11-11 06:35:40
所以你想要的是.terms-of-service可以调整大小，4个图像也可以随之调整大小。您希望图像在调整大小时保持成比例。但是改变宽度会拉伸它们。
如果是这样，那么您可以尝试object-fit: contain;属性。或者使用aspect-ratio: 250/100;属性设置每个图像的纵横比，以使它们保持正确的形状。
<!DOCTYPE html>
<html>
<head>
<style>
.terms-of-service h2 {
text-align: left;
}
.terms-of-service p {
margin: 5px;
padding-left: 5px;
}
.small-logos {
display: flex;
justify-content: space-evenly;
}
.small-logos img {
width: 10%;
object-fit: contain;
/*aspect-ratio: 2/1;*/
}
</style>
</head>
<body>
<div class="terms-of-service col-content">
<h2>Terms of Service</h2>
<p>This site uses cookies. By continuing to use this site you are agreeing to our use of cookies. Please refer to <a href="#">Google's Privacy Terms</a> and
<a href="#">Terms of Service</a> to see how cookies are used.</p>
<div class="small-logos"><img src="https://www.sabico.com/wp-content/uploads/2012/09/SABICO-group.png" alt="BBB" /><img src="https://www.sabico.com/wp-content/uploads/2012/09/rsc.jpg" alt="25y" /><img src="https://upload.wikimedia.org/wikipedia/en/thumb/2/24/WWF_logo.svg/188px-WWF_logo.svg.png"
alt="green" /><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Bass_logo.svg/255px-Bass_logo.svg.png" alt="Env" /></div>
</div>
</body>
</html>
进入全页模式并调整浏览器窗口的大小。
但是如果你想根据图片的实际大小来调整尺寸，那么规格说明是这样写的：
在CSS中，替换元素是指其表示形式不在CSS范围内的元素；它们是外部对象，其表示形式独立于CSS格式化模型。
简单地说，它们是其内容不受当前文档样式影响的元素。使用CSS可以影响被替换元素的位置，但不能影响被替换元素本身的内容。一些被替换的元素，比如元素，可能有自己的样式表，但它们不继承父文档的样式。
CSS对替换的元素唯一的其他影响是，有一些属性支持控制元素内容在其框中的位置。典型的替换元素包括：
<iframe><video><embed><img>
这是有道理的，因为如果你改变了“服务条款”框的尺寸，那么你必须在照片编辑软件中编辑所有4张图片，以改变它们的尺寸，使它们与主题保持一致。
有关更多信息，请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element
https://stackoverflow.com/questions/69921949
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号