html容器中圖片的拉伸與縮放

html中能通過"background-image"設置背景圖片，也能通過<img>標簽來在容器中插入圖片。

當圖片自身大小與容器大小無法匹配時，就需要縮放使其填充容器看上去正常顯示。接下來分開講解。

• 背景圖片“background-image”

首先我們要設置背景圖片。因為圖片塞入容器中時，無論圖片多大，他的寬度都是默認展開全部比例，而高度則需要手動設置，否則不會顯示。

父容器設置了紅色邊框，以此分辨填充效果。

  .mask_1 {
    height: 100%; /*這里需要設置高度為100%，因為圖片默認以自身的寬度展開(無論他是否大過父級容器)，若不設置高度，則圖片將無法展示*/
    background-image: url("dragon.png");
  }

  .mask_2 {
    height: 100%;
    width: 100%;
    background-image: url(小圖測試.jpg);
  }

效果如下。左圖原圖比容器大，右圖更小。

可以看到默認情況下，大圖以容器左上角為原點鋪開；小圖則是以剩余空間進行平鋪。

 

接下來使用 background-size 來進行拉伸的控制。這個屬性能取三個值，默認是auto，也就是圖片原始尺寸塞進去，無論他是否能顯示完全。

 

 

cover：該屬性會按比例拉伸當前圖片，直至其中較短那條邊填滿容器。此舉會填充整個容器，但不可避免地會出現裁剪——如果原圖片長寬比與容器比例不一致的話。

  .mask_1 {
    height: 100%;
    background-image: url("dragon.png");
    background-size: cover;
  }

  .mask_2 {
    height: 100%;
    width: 100%;
    background-image: url(小圖測試.jpg);
    background-size: cover;
    background-repeat: no-repeat;/*禁止圖片平鋪空白，此項僅限於圖片本身小於容器大小時*/
  }

可以看到，大圖片等比例縮放，短邊為高，因此右側被裁剪了；而小圖片的短邊為寬，因此下側被裁剪了。

注：可以通過對margin設置負值，來使得內部容器背景圖片向相應方向回調，看上去是在原始圖片中心

.mask_1 {
    height: 100%;
    background-image: url("dragon.png");
    background-size: cover;
    margin-left: -25%;/*向左移動父容器25%寬度。切記對父容器設置overflow：hidden，否則溢出內容會超出父元素*/
  }

注意，這里對相反方向的調動比例不應過大！！！

因為本身是由cover設定是按比例填充父容器的，若設置過大，他會向那個方向等比例放大。

以下圖一為-25%，圖二為-125%移動

 

 

contain：該選項類似上面的cover，只不過他判定的邊是【最長那條邊長】，因此圖片會完整顯示，但有可能會出現空白位置。

.mask_1 {
    height: 100%;
    background-image: url("dragon.png");
    background-size: contain;
/*這里大圖片沒有使用禁止重復，因此大圖片下方的空白被填充了*/
  }

  .mask_2 {
    height: 100%;
    width: 100%;
    background-image: url(小圖測試.jpg);
    background-size: contain;
    background-repeat: no-repeat;
  }

 

 

具體數值：可以直接填上具體的數字或者百分比，以此來自定義縮放百分比。格式為 background-size： 寬 高； 如果不設置高的話，他會按照原始比例進行縮放。

  .mask_1 {
    height: 100%;
    background-image: url("dragon.png");
    background-size: 50%;
  }

  .mask_2 {
    height: 100%;
    width: 100%;
    background-image: url(小圖測試.jpg);
    background-size: 60% 120%;
    background-repeat: no-repeat;
  }

可以看出，第一個大圖片自動壓縮為【父容器】的50%寬度大小（高度自動等比例縮放），並且因為沒有設置禁止重復，因此盡數填充下去了；

而第二個高度設置超出了100%，因此被縱向拉伸並被裁剪了。

設置具體像素值也是同理，再次不再贅述。

 

 

• <img>標簽插入圖片

 

 當然我們也可以在父容器內，通過<img>標簽插入圖片。我們最好也做一下父容器的設置，別讓溢出了。

<div>
  <div style="width: 610px; height: 510px;
  border: 5px solid red; clear: left;
  overflow: hidden; float: left;
  margin-right: 60px" class="mask_3">
    <img src="dragon.png" alt="">/*大圖片默認情況*/
  </div>

  <div style="width: 610px; height: 510px;
  border: 5px solid red; overflow: hidden;
  float: left" class="mask_4">
    <img src="小圖測試.jpg" alt="">/*小圖片*/
  </div>
</div>

 

 可以看到是和背景圖片差不多，默認情況下。

 

接下來用 object-fit 這個屬性來進行調整。參數如下：

 

 

fill：該屬性會使得圖片顯示所有內容至父容器內，如果大小不一致，那就按照父容器比例縮放；

.mask_3 img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

  .mask_4 img {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }

可以看到，左邊大圖向中間【縮】，變窄了；而右邊小圖向兩邊【伸】，變寬了。

 

 

contain:這個同背景圖片的contain，以最長邊進行判定，因此往往會顯示完整，並留白。這里會自動處於父容器的中心位置。

.mask_3 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

  .mask_4 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

可以看到處於中心位置。需要注意的是，<img>標簽還是擁有一開始設定的100%父元素大小，只不過那些留白部分無法填充就是了。

 

 

cover：以短邊進行填充，超出部分會自動裁剪，同理處於中心位置。

.mask_3 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

  .mask_4 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

 可以看到，這里就不需要像背景圖片那樣需要調整圖片的負外邊距，直接自帶居中效果！

這里不支持上下左右移動，因為實際超出部分是被直接裁掉了的。所以設置邊距的話只會留下空白。

 

 

none:原始尺寸展示，但整體處於父元素中心。

.mask_3 img {
    width: 100%;
    height: 100%;
    object-fit: none;

  }

  .mask_4 img {
    width: 100%;
    height: 100%;
    object-fit: none;
  }

可以看到，大圖片多余部分被裁減，並處於父元素中心位置。小圖片同理。

 

 

scale-down：自動處理。會自動選擇【none】或者【contain】其中的一種，取決於誰能完整顯示出來。

.mask_3 img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;

  }

  .mask_4 img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
  }

可以看到，如果是大圖片，那么他就會自動選擇【contain】——以最長邊進行填充；

若是小圖片則以【none】屬性展示。

力保讓圖片能夠整體完整地展示出來！

 

 

 

與君共勉。