我希望 的高度<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> …