web端图片等比例处理裁剪

最新推荐文章于 2024-08-28 09:27:36 发布

嘿，小苹果

最新推荐文章于 2024-08-28 09:27:36 发布

阅读量417

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： web开发

本文链接：https://blog.youkuaiyun.com/AAAXiaoApple/article/details/120745852

javascript 专栏收录该内容

30 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .demo {
      width: 100%;
      height: 300px;
      overflow: hidden;
    }
    .demo1-1 {
      float: left;
      width: 200px;
      height: 200px;
    }
    .zoomImage, .zoomImage2, .zoomImage3{
      width: 100%;
      height: 0;
      padding-top: 100%;
      overflow: hidden;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      -webkit-background-size: cover;
      -moz-background-size: cover;
    }
    .zoomImage2 {
      padding-top: 75%;
    }
    .zoomImage3 {
      padding-top: 133.33%;
    }
  </style>
</head>
<body>
  <h2>第一张图片633*950，第二张图片1280*800，第三张图片100*100</h2>
  <div class="demo">
    <h3>对上面的三张图片的宽和高分别等比例缩放到200*200像素(1:1)</h3>
    <div class="demo1-1">
      <div class="zoomImage" style="background-image: url(../img/1.png)"></div>
    </div>
    <div class="demo1-1">
      <div class="zoomImage" style="background-image: url(../img/2.png)"></div>
    </div>
    <div class="demo1-1">
      <div class="zoomImage" style="background-image: url(../img/3.png)"></div>
    </div>
  </div>

  <div class="demo">
    <h3>对上面的三张图片的宽和高进行4:3的缩放</h3>
    <div class="demo1-1">
      <div class="zoomImage2" style="background-image: url(../img/4.png)"></div>
    </div>
    <div class="demo1-1">
      <div class="zoomImage2" style="background-image: url(../img/5.png)"></div>
    </div>
    <div class="demo1-1">
      <div class="zoomImage2" style="background-image: url(../img/6.png)"></div>
    </div>
  </div>

  <div class="demo">
    <h3>对上面的三张图片的宽和高进行3:4的缩放</h3>
    <div class="demo1-1">
      <div class="zoomImage3" style="background-image: url(../img/7.png)"></div>
    </div>
    <div class="demo1-1">
      <div class="zoomImage3" style="background-image: url(../img/1.png)"></div>
    </div>
    <div class="demo1-1">
      <div class="zoomImage3" style="background-image: url(../img/2.png)"></div>
    </div>
  </div>
</body>
</html>