如何解决以百分比声明时,不考虑图像高度
我有以下HTML标记:
<div class="img-container"
<img src="images/" alt="" /> <!-- width: 100%; -->
</div>
<div class="img-container">
<img src="images/" alt="" /> <!-- width: 100%; -->
</div>
^^^我有2张图片,每张图片都嵌套在div内。 我给图像提供了100%的宽度,因此它们可以占据父级的全部宽度。我还给了img容器divs 50%的宽度。一切正常,两个图像在屏幕上的宽度均为50%。
^^^我从来没有给它一个高度值,这就是它的显示方式。
但是当我实际给定高度的50%时,它会显示如下:
50%的宽度有效,而50%的高度无效?
为什么?给它一个以像素为单位的高度可以正常工作,但是当我按百分比分配一个高度时,它就不会应用该高度...为什么?
解决方法
您的父元素(例如,图像-img-容器)的父元素是否已定义高度?
HTML / CSS的高度需要一些时间来适应-并非总是能以您期望的方式工作。
如果您看到类似这样的内容,则还与窗口大小有关: https://www.w3schools.com/css/tryit.asp?filename=trycss_dim_height_percent
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。