圖片等比例縮放裁切詳解

admin發表於2019-01-03

本文將通過程式碼例項詳細介紹一下如何實現圖片等比例縮放裁切效果。

圖片有兩種應用方式，一種作為子元素存在，一種是作為背景圖片。

在每一種應用方式中，圖片的等比例縮放又可以大致分為如下幾種情況：

（1）.確保圖片能夠填充滿元素，超出的部分被裁切或者隱藏。

（2）.確保圖片的長或者寬填充滿元素，超出的部分被裁切或者隱藏。

下面通過程式碼例項分別介紹一下上述列舉的中可能，需要的朋友可以做一下參考。

一.作為背景圖片：

通過CSS的background-image屬性可以設定元素的背景圖片效果。

下面就以如下圖片進行相關演示：

a:3:{s:3:\"pic\";s:43:\"portal/201901/03/235342ta2a287paqck18x8.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述圖片的尺寸是350*262，下面首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>background-clip屬性-螞蟻部落</title>
<style type="text/css">
div{
  border:10px solid green;
  width:250px;
  height:180px;
}
.bg{
  background-image:url(mytest/demo/small.jpg);
  background-repeat:no-repeat
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>

background-image屬性設定元素背景圖片，無法設定背景圖片的縮放效果。

只能是原生態，頂多調整一下背景圖片的位置，或者是否重複。

CSS3新增background-size屬性，它可以設定背景圖片的尺寸。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>background-clip屬性-螞蟻部落</title>
<style type="text/css">
div{
  border:10px solid green;
  width:250px;
  height:180px;
}
.bg{
  background-image:url(mytest/demo/small.jpg);
  background-size:200px 100px; 
  background-repeat:no-repeat
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201901/03/235423hnw6c6oc77y0qucq.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通過background-size屬性為背景圖片長寬賦予一個固定值，並沒有刻意保證等比例縮放。

background-size屬性有兩個關鍵字屬性值cover與contain，可以滿足背景圖片等比例縮放效果。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>background-clip屬性-螞蟻部落</title>
<style type="text/css">
div{
  border:10px solid green;
  width:250px;
  height:180px;
  margin:5px;
}
.cover{
  background-image:url(mytest/demo/small.jpg);
  background-size:cover; 
  background-repeat:no-repeat
}
.contain{
  background-image:url(mytest/demo/small.jpg);
  background-size:contain; 
  background-repeat:no-repeat
}
</style>
</head>
<body>
<div class="cover"></div>
<div class="contain"></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201901/03/235454r97jwjuwv7fmgvgv.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.cover：此屬性值會保證背景圖片等比例縮放填充滿元素，超出元素的部分會被隱藏裁切。

（2）.contain：此屬性與cover屬性類似，也是進行等比例縮放，但是它不保證填充滿元素，而是確保在長或者寬某一個方位上填充滿元素，比如在上述程式碼中，由於在高度上最先填充滿元素，於是將放棄寬度上填充元素。

關於background-size屬性內容可以參閱CSS3 background-size一章節。

二.作為子元素：

如果僅要求圖片在某一方位填充滿父元素，那麼只要將對應尺寸設定為100%即可。

圖片可以實現等比例縮放，不會變形，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>background-clip屬性-螞蟻部落</title>
<style type="text/css">
div{
  border:10px solid green;
  width:300px;
  height:180px;
  margin:5px;
  overflow:hidden;
}
div img{
  height:100%
}
</style>
</head>
<body>
<div class="ant"><img src="mytest/demo/small.jpg"></div>
</body>
</html>

設定圖片的高度為100%，那麼可以保證在垂直方向填充滿父元素，且是等比例縮放。在寬度上也是同樣的道理，但是有一個問題，那就是可能在某一範圍出現不能填充滿父元素的情況。

無法滿足佈局規整的要求，下面分享一段程式碼例項，它可以實現圖片等比例縮放填充滿整個父元素，超出的部分裁切。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin:0px;
  padding:0px;
}
div {
  border:10px solid green;
  width:300px;
  height:200px;
  font-size:0px;
}
</style>
<script>
let DrawImage = (ImgBox, ImgD, iwidth, iheight) => {
  ImgBox.style.overflow = "hidden";
  console.log(ImgD);
  console.log(ImgD.width);
  if (ImgD.width > 0 && ImgD.height > 0) {
    if (ImgD.width / ImgD.height >= iwidth / iheight) {
      ImgD.height = iheight;
      ImgD.width = (image.width / image.height) * iheight;
    }
    else {
      ImgD.width = iwidth;
      ImgD.height = (ImgD.height / ImgD.width) * iwidth;
    }
  }
}
window.onload = function () {
  let odiv = document.getElementsByTagName("div")[0];
  let oimg = document.getElementById("ant");
  DrawImage(odiv, oimg, 300, 200)
}
</script>
</head>
<body>
<div><img id="ant" src="mytest/demo/small.jpg"></div>
</body>
</html>

上述程式碼實現了圖片等比例縮放填充滿父元素的功能，程式碼分析如下。

函式四個引數解析如下：

（1）.ImgBox：圖片的父元素，也就是它的容器元素。

（2）.ImgD：圖片元素物件，也就是將要被縮放的圖片。

（3）.iwidth：容器元素的寬度。

（4）.iheight：容器元素的高度。

內部程式碼的縮放原理簡介如下：

（1）.如果圖片的長寬比大於父元素的長寬比，說明圖片的width相對更大，只要將圖片的高度設定為容器的高度即可，圖片寬度會超出容器的高度，進行裁切即可。

（2）.如果圖片的長寬比小於父元素的長寬比，說明圖片的height相對更大，只要將圖片的寬度設定為容器的寬度即可，圖片高度戶會超出容器的高度，進行裁切即可。

（3）.如果圖片的長寬比恰好等於父元素的長寬比，只要對寬度所放至容器的寬度即可，這很好理解。

這都是基礎的數學問題，感覺無法介紹的再詳細的，如有任何問題可以在文章後面留言。

相關文章