位置绝对父级在 FireFox 中没有子图像的宽度
Posted
技术标签:
【中文标题】位置绝对父级在 FireFox 中没有子图像的宽度【英文标题】：Position absolute parent does not have width of child image in FireFox 【发布时间】：2019-10-26 20:38:00 【问题描述】：问题
我希望<img> 的高度是其父级高度的100%，同时按比例缩放<img> 的宽度。当<img> 具有绝对位置并按预期工作时，这很容易做到。
*, *:before, *:after box-sizing: border-box;
body margin: 0;
.hero
border: 2px solid red;
position: relative;
min-height: 360px;
.content
/* Simulate content height */
/* height: 500px; */
.background
border: 2px solid #2EA800;
img
border: 2px solid #0083FF;
position: absolute;
top: 0;
right: 0;
height: 100%;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Example 1</title>
</head>
<body>
<div class="hero">
<div class="content">
Hey there
</div>
<div class="background">
<img src="https://via.placeholder.com/200x150" >
</div>
</div>
</body>
</html>但是，当它位于绝对位置的父级（图像容器）<div> 内时，父级的宽度计算不正确。
*, *:before, *:after box-sizing: border-box;
body margin: 0;
.hero
border: 2px solid red;
position: relative;
min-height: 360px;
.content
/* Simulate content height */
/* height: 500px; */
.background
border: 2px solid #2EA800;
.background
position: absolute;
top: 0;
right: 0;
height: 100%;
img
border: 1px solid red;
height: 100%;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Example 2</title>
</head>
<body>
<div class="hero">
<div class="content">
Hey there
</div>
<div class="background">
<img src="https://via.placeholder.com/200x150" >
</div>
</div>
</body>
</html>它应该如何工作
这只发生在 FireFox 中。在 Chrome 中，正如预期的那样，正确计算了图像容器的宽度。
JS Fiddle 中的代码示例（方便在其他浏览器中打开）
示例 1：https://jsbin.com/hababos/edit?html,css,output 示例 2：https://jsbin.com/jotefel/edit?html,css,output【问题讨论】：
我在 Internet Explorer 上也看到过这个问题。在 Chrome 和 Safari 中似乎很好，但试图在height: 100% 上保持图像纵横比和比例会导致这种奇怪的定位
@Paulie_D，我已经编辑了上面的帖子以使用 sn-ps 和嵌入图像。只是等待同行批准
【参考方案1】：
希望这会有所帮助。
.background img
float:right;
【讨论】：
虽然这会将图像放置在正确的位置，但我不相信它会使image container 的宽度正确。如果在图像加载时图像容器被用作具有背景颜色的占位符，这可能是一个问题
是的，就像@UsainBloot 说的那样。修复父级的位置而不是宽度，这是一个棘手的问题【参考方案2】：
我刚刚在使用 Firefox 时遇到了这个问题，这简直是一场噩梦。
不过，我已经设法为我的用例解决了这个问题。
在我的例子中，我使用了一个需要 100% 高度的图像叠加层，然后我使用了一个 div 渐变来填充屏幕上的其余空间。在 chrome 中工作正常，因为外部绝对 div 保持图像的大小并自行调整。 Firefox 的行为就像图像是全高一样，所以我需要坐在图像旁边以形成无缝叠加的渐变不起作用。
Praveen 用他的浮动建议让我走上了正确的轨道，所以谢谢你 Praveen！
我通过在我的父容器上使用 flex 解决了这个问题，然后我将我的项目对齐到 flex end，所以它们都正确地堆叠在正确的位置。写下来听起来很简单，但这真是一个令人沮丧的错误！！！
【讨论】：
以上是关于位置绝对父级在 FireFox 中没有子图像的宽度的主要内容，如果未能解决你的问题，请参考以下文章
防止子级在更新父级状态时重新渲染，使用父级方法作为本机反应的道具