Question

如果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="http://i.stack.imgur.com/o23xS.jpg"><!--

--></div>

注意：

使用JS

更改div的高度和宽度属性

FOR CLARITY：

我希望CSS属性的宽度，高度，最大宽度和最大高度属性与div标签是图像标签的行为相同。（保留纵横比，div的大小基于图像等...）

Answer 1

对这个虚假的img（.imgDiv）做了很多修改，之所以比它应该更难，是因为img是一个被替换的元素并且div不是，this article会解释差异（作者的第二语言是英语，但语法错误并不妨碍理解。）

示例1.＆amp; 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;
  }

背景属性

简而言之，如果您想模仿替换元素，则应使用替换元素。决定替换元素维度的因素本身并不是，但它具有什么（即img的内容将是png文件），未替换元素不是由它的内容决定的（即div）。所以我认为video元素会更适合img替换。

示例3＆amp; 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>

的属性：

海报：此属性接受图像的路径，然后显示图像，直到video元素播放。我们可以看到video元素可以轻松代替img。

控件：它们被删除，因为我们只对video元素的图像方面感兴趣。

src：我为此属性分配了一个小视频（86.6KB）。我认为我们不需要它，我只是将其添加进行测试。

宽度和高度：只需将宽度设置为100％，将高度设置为自动，video element本身就可以响应。

Plunker

<强>段

＆＃13;
＆＃13;
<!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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

如果您的意思是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。

使div表现为图像

注意：

2 个答案: