網頁圖片縮放的深入剖析

noONE 發布于2019-08-29 12:42 / 3655人閱讀

摘要：一瀏覽器圖片縮放默認表現行為行為在想出解決方案之前，首先要弄清楚瀏覽器對于圖片尺寸是怎么處理的，稍安勿躁，一步一步來分析下。圖片寬度隨容器寬度縮放，圖片寬高比不變，圖片高度高于容器時會溢出。

一、瀏覽器圖片縮放默認表現行為行為

在想出解決方案之前，首先要弄清楚瀏覽器對于圖片尺寸是怎么處理的，稍安勿躁，一步一步來分析下。
一個圖片可以改變成任意尺寸，容器是80%：

不加任何屬性：

img {}
div{
  width:80%;
  background-color:pink;
  text-align: center;
}

圖片默認是不會縮放的，寬高是圖片原尺寸，圖片寬高高于容器時會溢出。

width:100%

img {
  width:100%;
}
div{
  width:80%;
  background-color:pink;
  text-align: center;
}

圖片寬度隨容器寬度縮放，圖片寬高比不變，圖片高度高于容器時會溢出。

max-width:100%

tips: max-height:100%效果是一樣的

img {
  max-width:100%;
}
div{
  width:80%;
  background-color:pink;
  text-align: center;
}

圖片圖片寬度隨容器寬度縮放，圖片寬高比不變，圖片高度高于容器時會溢出，
但縮放不會超過原圖寬高。

二、解決方案 1、圖片容器寬度百分比，高度自適應；圖片等比例自適應

還是上面那個例子，圖片任意尺寸，容器是80%：

容器高度無限制時

img {
   max-width: 100%;
/*   max-height: 400px; */
}
div{
  width:80%;
/*   min-height: 300px; */
  background-color:pink;
  text-align: center;
}

容器設置最大高度

img {
   max-width: 100%;
   max-height: 400px; 
}
div{
  width:80%;
/*   min-height: 300px; */
  background-color:pink;
  text-align: center;
}

容器設置最小高度

tips:此時若圖片小于最小高度，圖片垂直居中(采用flex布局)

img {
   max-width: 100%;
/*   max-height: 400px; */
}
div{
  width:80%;
  min-height: 300px;
  background-color:pink;
  display: flex;
  justify-content: center;
  align-items: center;
}

容器設置最大最小高度

img {
   max-width: 100%;
  max-height: 400px;
}
div{
  width:80%;
  min-height: 300px;
  background-color:pink;
  display: flex;
  justify-content: center;
  align-items: center;
}

2、圖片容器寬高百分比；圖片等比例自適應

html,body{
  height: 100%;
}

.wrapper{
  width:80%;
  height:80%;
  background-color: pink;
}
.image{
  width: 100%;
  height: 100%;
  background-image: url("https://dummyimage.com/600x400/000/fff");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #aaa;
}

3、圖片容器寬高百分比；圖片居中覆蓋不縮放（顯示不完整但不失真）

html,body{
  height: 100%;
}

.wrapper{
  width:80%;
  height:80%;
  background-color: pink;
}
.image{
  width: 100%;
  height: 100%;
  background-image: url("https://dummyimage.com/600x400/000/fff");
  background-size: cover;
  background-position: center center;
}

4、使用picture元素或媒體查詢，不同場景加載不同圖片

如果元素與當前的和元素協同合作將大大增強響應式圖像的工作進程。它允許你放置多個source標簽，以指定不同的圖像文件名，進而根據不同的條件進行加載。

具體看：picturefill

GPU云服務器云服務器深入剖析nginx 背景圖片的縮放網頁縮放圖片縮放

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112082.html

CSS及布局

摘要：經過半年的打磨，正式發布，主要是新增了一些常用組件，并使用命名，為接下來的微信小程序開發做好準備。這兩種方式實現的瀑布流式布局均支持首屏和網頁窗口大小改變時的列數自適應。主要是對于標準里的布局方式草案中的布局方式進行一些總結。一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看...

jaysun 2019-08-29 14:04 評論0 收藏0
移動web開發問題和優化小結

摘要：如何讓我們所開發的手機頁面能有更好的交互體驗，就是這篇文章的主旨移動開發問題和優化小結。關于和鼠標事件的延遲說明，我引用葉小釵大神博客里面的一張圖片，如下在手機上，的延遲將近。 1.前言到目前為止，互聯網行業里，手機越來越智能化，移動端占有的比例越來越高，尤其實在電商，新聞，廣告，游戲領域。用戶要求越來越高，網站功能越來越好，效果越來越炫酷，這就要求我們產品質量越來越高，web前端開...

galaxy_robot 2019-08-01 17:40 評論0 收藏0
移動web開發問題和優化小結

摘要：如何讓我們所開發的手機頁面能有更好的交互體驗，就是這篇文章的主旨移動開發問題和優化小結。關于和鼠標事件的延遲說明，我引用葉小釵大神博客里面的一張圖片，如下在手機上，的延遲將近。 1.前言到目前為止，互聯網行業里，手機越來越智能化，移動端占有的比例越來越高，尤其實在電商，新聞，廣告，游戲領域。用戶要求越來越高，網站功能越來越好，效果越來越炫酷，這就要求我們產品質量越來越高，web前端開...

ysl_unh 2019-08-21 16:44 評論0 收藏0
【移動端web開發】（二）深入viewport

摘要：當你進行頁面放大的時候，原本在未縮放的頁面上看起來很小的尺寸，現在通過看上去變大了，事實上這部分的的值并沒有變化，僅僅是因為進行放大后，的的值所占的屏幕分辨率的值變大了。同理的的值并沒有發生變化但是值所占的屏幕分辨率的值變小了。前言通過上一篇我們已經大概明白viewport是什么，但是viewport并沒有那么簡單，一包研究得身心疲憊，腦子一個不夠用哈哈，讓我們一起看看吧！三個v...

Baoyuan 2019-08-22 16:58 評論0 收藏0
以最簡單的例子，深入剖析函數如何進行初始化工作，入棧，出棧全過程

摘要：在一個函數中的內容執行前會做一些變量的初始化工作，就是圖中下的內容。輸出完后，函數出棧，函數變為活動狀態，因為沒有返回值，所以仍然為同時執行下一語句，如下圖執行與相同，先是函數入棧，輸出然后將返回值賦給后出棧。 window.onload = function(){ debugger; var variable1,//定義變量1但沒有賦值...

lastSeries 2019-08-20 11:30 評論0 收藏0