img 标签百分比宽度异常

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2033 天前的主题，其中的信息可能已经有所发展或是发生改变。

我们知道，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%是按照自身的宽度计算的。

大家怎么看？

宽度

img

Chrome

标签

18 条回复 • 2019-04-30 09:16:54 +08:00

rabbbit

2019-04-29 05:50:31 +08:00

http://www.ayqy.net/doc/css2-1/visudet.html#Computing_widths_and_margins

rabbbit

2019-04-29 06:22:09 +08:00

换一个文档,上面那个看起来像机翻
https://www.w3.org/html/ig/zh/wiki/CSS2/visudet/zh-hans#Computing_widths_and_margins

pinews

2019-04-29 07:40:37 +08:00

不太明白，意思是 IE 是对的？

yushiro

2019-04-29 08:15:24 +08:00 via iPhone

外框绝对定位有宽度吗？如果没设宽度，那 img100%是多宽？

pinews

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

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

pinews

2019-04-29 08:59:11 +08:00

换言之，绝对定位必须显性的声明宽度咯？

aa1072551507

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

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

yushiro

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

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

grewer

2019-04-29 09:25:55 +08:00

子元素也绝对定位试试

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 有什么区别和联系？

rabbbit

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

火狐的表现和 ie 一样,应该是 chrome 的实现不合标准.

pinews

2019-04-29 10:32:50 +08:00

@rabbbit 非常感谢你兔子？！

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 了？

pinews

2019-04-29 19:22:07 +08:00

@aa1072551507 body 宽度怎么是？

aa1072551507

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

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