如何解决为什么div环绕img标签总是比img大?
在下面的代码中,只是一个用div标签包裹的img标签。没有其他的!图像应扩展到父级的100%宽度。没有提供其他规则。
.page {
max-width: 300px;
}
.wrapper {
border: 2px dotted green;
}
img {
width: 100%;
}
<div class="page">
<div class="wrapper">
<img src="https://images.unsplash.com/photo-1604869176104-fcd142638bd9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80" alt="random image">
</div>
</div>
在所有浏览器中,结果是带有div标签arround的img。但是看起来img的底边是margin,div的底边是div。
因此,让我们将margin: 0; padding: 0;
添加到所有元素:
.page {
max-width: 300px;
}
.wrapper {
border: 2px dotted green;
}
img {
width: 100%;
}
* {
margin: 0;
padding: 0;
Box-sizing: border-Box;
}
<div class="page">
<div class="wrapper">
<img src="https://images.unsplash.com/photo-1604869176104-fcd142638bd9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80" alt="random image">
</div>
</div>
结果仍然相同...
使两个元素具有相同的宽度和高度(就像每个嵌套块元素都应该一样)的唯一解决方案是在包装div中添加display: flex;
。 WTF?
有人可以解释为什么他们指定了这种不合逻辑的默认行为吗?
解决方法
这是因为图像标签默认情况下是内联呈现的,因此请用display:block;
.page {
max-width: 300px;
}
.wrapper {
border: 2px dotted green;
}
img {
width: 100%;
display:block;
}
<div class="page">
<div class="wrapper">
<img src="https://images.unsplash.com/photo-1604869176104-fcd142638bd9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80" alt="random image">
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。