Html 使div表现为映像

如果div的背景是图像，如何使其大小属性的行为与图像标记的行为完全相同

其思想是复制此代码段中图像标记的行为方式：

div{
背景色：#2DBCFF；
文本对齐：居中；
框大小：边框框；
字号：0；
}
img{
最大宽度：100%；
最大高度：100%；
宽度：自动；
高度：自动；
垂直对齐：中间对齐；
}

---

如果您的意思是

div

宽度和高度与图像的纵横比有关，那么您可以通过使用

填充来依赖CSS，如下所示：

div{
宽度：100%；
最大宽度：300px；
身高：0；
框大小：内容框；
填充底部：50%；/*宽高比*/
}

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

示例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;
  }


背景属性







简言之，如果你想模拟一个被替换的元素，你应该使用一个被替换的元素。决定被替换元素的尺寸的不是它本身，而是它拥有什么（即
img
的内容将是一个png文件），一个未被替换的元素不是由它的内容决定的（即div）因此我认为
video
元素将是更合适的
img
替代品

示例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> 

你的意思是什么？如何表现？宽度、高度、最大宽度和最大高度属性在图像上表现相同，因此你想使用图像的宽度和高度，将其设置为div的宽度和高度，并将该img设置为该div的背景？是的，考虑到纵横比，但最大高度和最大宽度属性是类似的。我知道了我已经研究过了。问题：max-width需要是父元素的宽度，就像我的snippent中的图像标记一样。另外，不使用max-height属性。然后将
max-width
更改为100%…这将使其与父元素的宽度相同。max-height仍然是一个问题。指向该文章的链接不再有效。您还有其他问题吗她的问题？你能看看我（类似）的问题吗？谢谢！这是文章：