如何让父元素在大小上表现得与子元素完全一样？
[英]How can I let a parent element behave exactly like its child in terms of size?
问题描述
例如，如果我放置
<div>
<img ...>
</div>
然后将样式width ， height ， max-width等应用于div元素，我希望结果看起来就像我将img元素放置在其中并对其应用样式一样。
使用CSS可以吗？ 如果不是，是否可以使用JavaScript？
编辑：为澄清。 我不是在寻找针对特定案例的解决方案。 相反，我正在寻找某种模式来将img元素替换为div > img元素，而不改变外观。 该模式应在尽可能多的上下文中工作。
3 个解决方案
解决方案1
1 2018-02-03 23:12:32
您可以简单地使用
img {
width: 100%;
height: 100%;
display: block;
}
但是，这极有可能导致图像失真（即，宽度与高度的比例），除非您以与图像比例相对应的彼此精确的比例定义宽度和高度。
解决方案2
0
将css属性display设置为inline-block 。
这是一个代码段（div边框为蓝色）：
<!DOCTYPE html> <html> <head> <style> #example1 { box-sizing: content-box; display:inline-block; } </style> </head> <body> <h1> <p></p> <div id="example1"><img src="https://lh4.googleusercontent.com/-Y6mZ3dizRWA/AAAAAAAAAAI/AAAAAAAAAZ8/lC8SUn_bjkU/photo.jpg?sz=48"></img></div> </body> </html>
解决方案3
-1 2018-02-03 23:12:39
是的，如果您为图片设置了width: 100%和height: 100% ，则将采用div的大小。
但是您的图像将以这种方式拉伸，您可能只想指定其宽度或高度，或者如果您想以一种聪明的方式用图像填充div，而更喜欢使用background-image background-size来cover或contain的background-image 。
PS：图像标签是唯一标签： <img>而不是<img></img>
嵌套子对象的行为与其父对象不同
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.