如何解决仅使用 CSS 将容器 div 调整为低于内容总宽度时,图像不会调整大小
当父 div 小于内容宽度的总和时,如何仅使用 CSS 将图像的大小调整为低于其原始宽度和高度。我有一个带有一些图像的 div,如果我调整窗口大小,可以说低于 400 像素,那么图像的大小不会低于其原始大小。有什么方法可以在调整浏览器窗口大小时自动调整内容图像。我在下面附上了截断的代码:
charmap
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
max-width: 900px;
max-height: 256px;
border: thin solid silver;
}
img {
height: 100%;
max-height: 256px;
width: auto;
}
body {
margin: 5px;
}
解决方法
您可以使用 vw
这样的单位,它代表 viewport width
。因此,假设我们将 img
width
设置为 33.33vw
,那么 img
将是屏幕尺寸的 33.33%
。
body {
margin: 5px;
}
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
max-width: 900px;
max-height: 256px;
border: thin solid silver;
}
img {
height: 100%;
width: 33.33vw;
}
<div class="container">
<img src="https://img.icons8.com/pastel-glyph/2x/blood-sample.png" />
<img src="https://img.icons8.com/pastel-glyph/2x/blood-sample.png" />
<img src="https://img.icons8.com/pastel-glyph/2x/blood-sample.png" />
</div>
我找到了解决方案。只需将所有图像放入 div 并将图像宽度设置为 100%。希望它可能对某人有帮助。截取代码如下:
.container {
width: 100%;
display: flex;
justify-content: space-between;
max-width: 900px;
max-height: 256px;
border: thin solid silver;
}
img {
width: 100%;
}
body {
margin: 5px;
}
<body>
<div class="container">
<div><img src="https://img.icons8.com/pastel-glyph/2x/blood-sample.png" /></div>
<div><img src="https://img.icons8.com/pastel-glyph/2x/blood-sample.png" /></div>
<div><img src="https://img.icons8.com/pastel-glyph/2x/blood-sample.png" /></div>
</div>
</body>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。