如何使 <div> 与背景图像保持动态高度

Posted 2023-02-25

【中文标题】如何使 <div> 与背景图像保持动态高度

【英文标题】：How to keep <div> with a Background image have dynamic height

【发布时间】：2015-04-05 21:29:17

【问题描述】：

我需要用背景图片模仿 div 的以下行为。

该页面有 3 个相互重叠的 div。它们的最大宽度为 600 像素。 在较小的屏幕上打开时，宽度会根据屏幕调整，高度也应该调整，保持图像的纵横比始终为 10/7

我尝试使用 background-size 样式属性，但这不会改变 div 的高度，所以图片最终被剪裁了。我不能剪辑图像。

请指教

一个

两个

三个

【问题讨论】：

你能发一个 JS fiddle 吗？ jsfiddle.net

【参考方案1】：

嗯，实际上这取决于您的实际标记，但这可能是一个起点：

关键是top/bottom padding 上的百分比值是相对于盒子的包含块的width。

另外，使用background-size: contain 调整背景图像的纵横比。值得注意的是，IE9+ 支持此功能。

有关响应式容器的进一步阅读，您可以参考我的回答here。

Example Here.

.box 
  background: url(http://placehold.it/300) 50% 50% / contain no-repeat;
  
  width: 80%; /* or whatever else */
  overflow: hidden;
  position: relative;


.box > span 
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  padding: 5% 0;


.box > span:before,
.box > span:after 
  content: "";
  position: absolute;
  left: 0; right: 0;
  padding: 2% 0;


.box > span:before 
  top: 0;
  background-color: rgb(255, 90, 79);


.box > span:after 
  bottom: 0;
  background-color: rgb(159, 31, 56);


.box:before 
  content: "";
  display: block;
  padding-bottom: 70%;

<div class="box">
  <span>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis dolores doloremque id quia esse! Doloribus voluptate nihil quam natus, similique, vero amet nesciunt excepturi. Optio dicta quas, dolores facere voluptatem.
  </span>
</div>

【参考方案2】：

如果您的 div 仅用于显示此图像，您可以简单地使用这个 css“技巧”

div
  background: url(http://gogoodscout.com/blog/wp-content/uploads/2015/02/Do-YOu-Feel-Good.jpg);
  width: 100%;
  padding-bottom: 49%;
  background-size: cover;

<div></div>

请注意，如果您调整填充以反映纵横比，那么 div 将始终具有图像的纵横比。

【参考方案3】：

这个技巧可以帮助你：

#container
  
background-image:url("http://cdn4.colorlib.com/wp/wp-content/uploads/sites/2/2014/02/Olympic-logo.png"); 
  background-size:cover;
  

#ghostImg
  width:100%;
  visibility:hidden;
  

<div id="container">
  <img src="http://cdn4.colorlib.com/wp/wp-content/uploads/sites/2/2014/02/Olympic-logo.png" id="ghostImg"/>
  </div>

【讨论】：

作品 :) 谢谢大卫！真的很感激。