代码改变世界

css3 实现图片等比例放大与缩小

2018-01-30 23:07  龙恩0707  阅读(...)  评论(... 编辑 收藏

css3 实现图片等比例放大与缩小

   在工作中,经常会碰到图片缩放的情况,比如服务器端返回的图片大小,可能大小不同,有的大,有的小,服务器端返回的图片大小我们不能控制的,但是在我们设计稿的时候,可能会规定每张图片的大小为固定的宽度和高度,比如200px*200px这样的。我们这边使用的是背景图片来做的,
但是如果直接使用 img标签这样引入图片貌似不行,因此我们目前只能使用背景图片来做。对于大一点的图片我们可以缩放的,但是对于很小
很小的图片,我们把他们拉伸的话,可能会有点点模糊,但是一般的情况下是不会有这种情况,因为对于图片的缩放,服务器端不太可能会返回
一张很小很小的图片回来,一般都是比较大的。

1. 等比例缩放(1:1)
我们先来看看实现图片等比例缩放的情况下:
html代码如下:

<div class="demo1-1">
  <div class="zoomImage" style="background-image: url(./images/1.jpg)"></div>
</div>
<div class="demo1-1">
  <div class="zoomImage" style="background-image: url(./images/2.jpeg)"></div>
</div>
<div class="demo1-1">
  <div class="zoomImage" style="background-image: url(./images/3.png)"></div>
</div>

css代码如下:

.demo1-1 {
  float: left;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.zoomImage {
  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;
}

如上代码就可以实现了。下面是简单的代码分析一下实现方式:
1-1 在父容器div.demo1-1中,定义容器显示的大小为 200px*200px;这个就是我们设计稿中显示的大小。
1-2 对于图片的div先设置如下样式:

width: 100%;
height: 0;
padding-top: 100%;
overflow: hidden;

如上代码height虽然设置为0,但是padding-top设置了100%,并且宽度width:100%, 高度div是按照1:1的方式来实现的。
至于为什么需要使用padding-top来实现 ,可以看我这篇文章

下面如下样式:

background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;

是让背景图片居中显示,并且不重复,且背景大小覆盖整个容器就可以了;

下面是所有的代码了:

<!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(./images/1.jpg)"></div>
    </div>
    <div class="demo1-1">
      <div class="zoomImage" style="background-image: url(./images/2.jpeg)"></div>
    </div>
    <div class="demo1-1">
      <div class="zoomImage" style="background-image: url(./images/3.png)"></div>
    </div>
  </div>

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

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

demo查看