img 标签百分比宽度异常

我们知道，html 中暗藏了一些默认宽高，比如 body 标签默认是 100%的，在里面建立一个 div 标签，他会继承这个 100%，放一个 img 标签，默认是 img 自身大小，如果给 img 加一个 100%的宽度，宽度就是外框的宽度。
今天遇到一个例外，如果外框是绝对定位，这个宽度似乎没了，之前我不知道，不过没问题，我用了 IE 和 chrome 都是这样。
img 自身宽 1200px，高 400px，设定宽度 100%，高度 100px，IE 和 chrome 表现并不一致，IE 中设定宽度无效，实际宽度为依高度缩放后的宽度，1200/(400/100)=300，而 chrome 是 1200，也就是说 chrome 的 100%是按照自身的宽度计算的。

大家怎么看？

pinews

2019-04-29 08:57:13 +08:00

@yushiro 原本是外框的外框是设定有宽度的，我原以为外框继承，然后 img 继承，没想到遇到绝对定位中断继承了，这个 100%是因为图片本身的尺寸和我想要的尺寸是一样的，所以我原以为 chrome 是正确的，ie 出 bug 了，现在看来并不是那么回事，所以请教大家的看法

aa1072551507

2019-04-29 09:13:57 +08:00

你父元素都脱离文档流了，子元素怎么可能再去继承文档内的元素？很难理解吗.....

yushiro

2019-04-29 09:24:57 +08:00

@pinews 看来你对 position 的 absolute，relative，static 这 3 个属性需要再去复习一下。
尽量不要百度查，去 google 上搜

rabbbit

2019-04-29 09:47:33 +08:00

无法复现,给个 demo 吧.

如下这个结构在 ie 中是没问题的
<style>
img {
width: 100%;
position: absolute;
height: 200px;
}
</style>
<body>
<div>
<img src="logo.jpg">
</div>
</body>

pinews

2019-04-29 10:08:09 +08:00

<!doctype html>
<html>
<head>
</head>
<body>
<div style="position:absolute;">
<img src="http://toyota.com.cn/mainvisual/ad/32.jpg" style="width:100%;height:100px;" />
</div>
</body>
</html>

pinews

2019-04-29 10:16:34 +08:00

@aa1072551507
@yushiro 脱离文档流，文章写的是脱离原位置，并没有说明宽高变化。

不知道这和 transform 有什么区别和联系？

b0x

2019-04-29 12:33:48 +08:00

1.不显式声明是 relative 的元素默认是 static.
2.absolute 元素的参照是离他最近的一个 relative 父元素. 如果都不是,则参照是 html.
3. 建议先引入 normalize.css,抹平各浏览器的默认样式差异

aa1072551507

2019-04-29 14:13:50 +08:00

@pinews 你外层 DIV 脱离文档，那么他的宽只会显式的继承有相对 /绝对 /flex 定位的父元素或者 body，你父 div 绝对定位之后都没有设置宽度即使以 body 进行参考那宽度也是 0，怎么可能显示出来更不要说子元素 IMG 了？

aa1072551507

2019-04-30 09:16:54 +08:00

@pinews 你想指的是 body 宽度为什么是 0? 我说过了绝对定位只会显式的继承，跟父元素宽度多少没有干系

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/559626

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.