css背景图等比例缩放，盒子随背景图等比例缩放

最新推荐文章于 2024-07-08 12:47:09 发布

转载最新推荐文章于 2024-07-08 12:47:09 发布 · 3.1k 阅读

本文介绍了一种使用CSS实现背景图等比缩放，并使元素根据背景图高度自动调整位置的方法。通过巧妙地利用伪元素及padding-top属性，确保了布局在不同屏幕尺寸下始终保持一致的比例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很多时候我们给网站了一个大banner,但是随着屏幕的变化，背景会变形，我们知道background-size可以实现背景图等比例缩放，但是，我们想让下面的盒子根据缩放后背景图的高度，也能自动向上挤。这用css竟然也是可以实现的，瞬间感觉自己的css弱爆了，下面是我写的小demo,我想在响应式的网站上，这个用途还是很广的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .wrap {
      position: relative;
    }
    .banner {
      width:100%;
      height:auto; 
      background-image: url(banner.jpg);
      background-size: 100% auto;
      background-repeat: no-repeat;
      position: relative;
    }
    .banner::after {
      content: "";
      display: block;
      /*图片的宽高比计算得出*/
      padding-top: 45%;
    }
     .box {
      background-color: green;
      /*居中盒子*/
      position: absolute;
      top:100px;
      left:0;
      right: 0;
      margin:0 auto;
      width:50%;
      height:100px;
    } 
     .main {
      width:100%;
      height:100px;
      background-color: yellow;
    } 
  </style>
</head>
<body>
<div class="wrap">
  <div class="banner">
    <div class="box"></div>
  </div>
  <div class="main"></div>
</div>
</body>
</html>