缩放div以适合背景图像

4 回答

• 24

  让透明图像决定您的 DIV 尺寸 .

  jsBin demo

  里面的div放了相同的图像

  <div id="mainHeaderWrapper">
     <img src="path/to/image.jpg"><!-- I'm invisible! yey!-->
  </div>
  

  将该图像设置为

  #mainHeaderWrapper{
      background: no-repeat url(path/to/image.jpg) 50% / 100%;
  }
  #mainHeaderWrapper img{
      vertical-align: top;
      width: 100%; /* max width */
      opacity: 0;  /* make it transparent */
  }
  

  这样，DIV的高度将由包含不可见图像决定，
  将 background-image 设置为居中，完整（ 50% / 100% ），它将匹配该图像的比例 .

  不确定你是否想要操纵colors of the background-image或什么（使用CSS3 filter ），但现在再次阅读我写的内容...
  Isn't it simpler to simply put an image inside a DIV? :)

  在DIV中需要一些内容吗？

  jsBin demo 由于包含图像，您需要一个额外的子元素，该元素将被设置为 position:absolute and act as an overlay element

  <div id="mainHeaderWrapper">
     <img src="path/to/image.jpg"><!-- I'm invisible! yey!-->
     <div>
       Some content...
     </div>
  </div>
  

  #mainHeaderWrapper{
      position: relative;
      background: no-repeat url(path/to/image.jpg) 50% / 100%;
  }
  #mainHeaderWrapper > img{
      vertical-align: top;
      width: 100%; /* max width */
      opacity: 0;  /* make it transparent */
  }
  #mainHeaderWrapper > div{
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
  }
  

  回复于 2024-04-28T02:20:22+08:00
• 1

  如果您知道图像的比例，请使用百分比填充来定义容器的高度 . 设置 height:0 并将垂直填充设置为宽度的百分比 .

  这种方法的关键是基于百分比的垂直填充始终与宽度相关 .

  根据box model (w3.org)：

  百分比是根据生成的框的包含块的宽度计算的，即使对于“填充顶部”和“填充底部”也是如此 .

  下图中，图像为400px X 200px，因此高宽比为1：2， padding-top 设为50％;

  #mainHeaderWrapper {
    width: 100%;
    height: 0;
    padding-top:50%;
    background-image: url(//lorempixel.com/400/200/abstract/1/);
    background-size: 100% auto;
    background-repeat: no-repeat;
  }
  

  <div id="mainHeaderWrapper"></div>
  stuff below the image
  

  在另一个示例中，图像是300px X 100px . 高度是宽度的1/3，因此 padding-top 设置为33.33％：

  #mainHeaderWrapper {
    width: 100%;
    height: 0;
    padding-top:33.33%;
    background-image: url(//lorempixel.com/300/100/abstract/1/);
    background-size: 100% auto;
    background-repeat: no-repeat;
  }
  

  <div id="mainHeaderWrapper"></div>
  stuff below the image
  

  ---

  编辑：

  根据Paulie_D的提示，div中的其他内容必须绝对定位，如下所示 . 我建议使用百分比来定位这些元素 .

  #mainHeaderWrapper {
    width: 100%;
    height: 0;
    padding-top: 33.33%;
    background-image: url(//lorempixel.com/300/100/abstract/1/);
    background-size: 100% auto;
    background-repeat: no-repeat;
  }
  div#inner_content {
    position: absolute;
    top:0;
    width:100%;
    margin-top:10%;
    color: #FFF;
    text-align: center;
    font-size:20px;
  }
  

  <div id="mainHeaderWrapper">
    <div id="inner_content">Hello World</div>
  </div>
  stuff below the image
  

  回复于 2024-04-28T02:20:22+08:00
• 7

  这可以在不使用虚拟图像的情况下完成 . 我将使用我刚刚使用过的图像的尺寸 .

  我的图像尺寸为2880x1410 . 简化尺寸 - > 96/47（我使用了这个简单的比率计算器http://andrew.hedges.name/experiments/aspect_ratio/） . 获得简化比率后，将高度和宽度插入等式：

  高度：calc（（100vw * W）/ H）;所以我的阅读：高度：计算（（100vw * 47）/ 96）;

  无需担心div的内容（除非它们不合适）

  回复于 2024-04-28T02:20:22+08:00
• 0

  body{ margin: 0; padding: 0}
  
  #box1{
  background: url(http://lorempixel.com/400/200/food/);
  background-size: cover; 
  background-attachment: fixed; 
  margin: 0; 
  width: 100%; 
  height: 100vh; 
  display: table;
  }
  h1{ color: #ffffff; font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; font-size: 38px; text-align: center; font-weight: normal; background: rgba(0,0,0,0.3); display: table-cell; vertical-align: middle}
  

  <div id="box1">
  		<h1>Code Bluster BILU </h1>
  	</div>
  

  回复于 2024-04-28T02:20:22+08:00