css3 實現圖片等比例放大與縮小

龍恩0707發表於2018-01-30
CSSS3

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檢視

相關文章