如果 div 的背景是图像，如何使 div 的大小调整属性的行为与图像标签的行为完全相同？
这个想法是复制图像标签在此代码片段中的行为方式：
div{
background-color: #2DBCFF;
text-align:center;
box-sizing: border-box;
font-size:0;
}
img{
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
vertical-align: middle;
}<div style="width:300px; height: 150px; line-height: 150px;"><!-- <<<CSS props controlled
and changed with JS
--><img src="https://i.sstatic.net/o23xS.jpg"><!--
--></div>div的高度和宽度属性通过JS改变
为了清楚起见：
我希望 CSS 属性 width、height、max-width 和 max-height 属性的行为与 div 标签是图像标签相同。 （保留长宽比，div 的大小基于图像等...）
对这个人造
img.imgDivimgdiv示例 1. 和 2. 以下是原文
img.control.imgDiv// Example 1. `.control`: `position: relative` was added for demo purposes.
.control {
position: relative;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
vertical-align: middle;
}
.imgDiv {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
vertical-align: middle;
background-image: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
简而言之，如果你想模仿替换元素，你应该使用替换元素。决定替换元素尺寸的不是它本身，而是它所具有的内容（即
imgvideoimg示例 3. 和 4. 快速细分：
// Do not copy this code, I broke it into pieces so you don't have to scroll
<div class="case" style="width:300px; height: 150px; line-height: 150px;">
<video id="vid1"
poster="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png"
width="300" height="150"></video>
</div>
// Do not copy this code, I broke it into pieces so you don't have to scroll
<video id="vid2"
poster="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png"
src="https://glpjt.s3.amazonaws.com/so/av/vs8s3.mp4"
width="100%" height="auto">
</video>
videovideoimgvideovideo片段
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>35522592</title>
<style>
body {
counter-reset: exp;
}
span.txt:before {
counter-increment: exp;
content: "Example " counter(exp)". ";
}
.box {
position: relative;
display: inline-table;
min-width: 300px;
min-height: 150px;
margin: 5% auto;
}
.case {
position: relative;
background-color: #2DBCFF;
text-align: center;
box-sizing: border-box;
font-size: 0;
margin: 20px;
}
.control {
position: relative;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
vertical-align: middle;
}
.imgDiv {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
vertical-align: middle;
background-image: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.big {
font-size: 24px;
}
.txt {
margin: 0 0 15px 20px;
}
#vid1,
#vid2 {
fit-object: contain;
}
#b2 {
background: #F06;
min-width: 40vw;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<section class="box">
<div class="case" style="width:300px; height: 150px; line-height: 150px;">
<img class="control" src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png">
</div>
<span class="txt">This is the image<b class="big">⇧</b> from the OP.</span>
<div class="case" style="width:300px; height: 150px; line-height: 150px;">
<div class="imgDiv"></div>
</div>
<span class="txt">This div <b class="big">⇧</b> uses the property background-image.</span>
<div class="case" style="width:300px; height: 150px; line-height: 150px;">
<video id="vid1" poster="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" width="300" height="150"></video>
</div>
<span class="txt"><b class="big">⇧</b>This is a video element it only has an image, no video.</span>
</section>
<section class="box" id="b2">
<video id="vid2" poster="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" src="https://glpjt.s3.amazonaws.com/so/av/vs8s3.mp4" width="100%" height="auto"></video>
<span class="txt">This is a video element <b class="big">⇧</b>it has an image and a video.</span>
</section>
</body>
</html>
aspect-ratio
，可用于实现所需的结果，并且跨浏览器普遍支持
div {
width: 100%;
aspect-ratio: 16 / 9;
}
div
的宽度和高度会像图像一样相对于纵横比发生变化，那么您可以通过使用
padding来依赖CSS，如下所示：
div {
width: 100%;
max-width: 300px;
height: 0;
box-sizing: content-box;
padding-bottom: 50%; /* Aspect ratio of the width/height */
}
无需JS。