如何解决CSS调整百分比宽度而不限制图像大小
我正在尝试使图像适合横幅,由灰色区域显示。根据我的理解,将img高度设置为100%会导致其高度为其容器高度的100%,即div。但是,很明显,图像不是根据div部分的高度调整大小。
对此必须有一个非常基本的答案,但我不知道为什么会这样。
<!DOCTYPE html>
<style>
div {
background-color: grey;
height: 5%;
max-height: 100px;
}
img {
height: 100%;
}
</style>
<html>
<body>
<div>
<img src="https://mat3e.github.io/brains/img/3.jpg">
</div>
</body>
</html>
在下面粘贴我的评论: CSS: How can I set image size relative to parent height?
对此链接的响应是,在问问者的代码中演示了添加固定高度的问题,我没有立即发现我的错误没有为相对于外部容器的 any 添加固定高度到img(以我为例)。我实际上意识到也可以添加固定的大小,但是我不想这样做,因为我希望将高度保持为百分比。
解决方法
您至少需要给身体一个固定的高度。 看看this。我修改了您的代码,使其适用于您。
,在max-height: inherit;
标记中添加img
。您的图片高度将如何调整以适应父级的大小。
div {
background-color: grey;
height: 5%;
max-height: 100px;
}
img {
height: 100%;
max-height: inherit;
}
<div>
<img src="https://mat3e.github.io/brains/img/3.jpg">
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。