Проблема
Я хочу, чтобы высота <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" alt="">
</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" alt="">
</div>
</div>
</body>
</html>
Как это должно работать
Это происходит только в FireFox .В Chrome, как и ожидалось, правильно рассчитывается ширина контейнера изображения.
Пример кода в JS Fiddle (легко открывается в других браузерах)