怎麼讓圖片響應式

1. 怎樣將圖片轉哈成響應式

1、首先圖片分為背景圖片和通過img標簽引入的圖片，前者可以通過media query自動的切換不同解析度的版本，但是在不支持background image size的瀏覽器中背景圖片無法無級的調整大小（也就是在media query切換css的點上可以換一張不同解析度的圖，但是沒法兒獲得兩張解析度中間大小的版本），而且在很多情況下（比如cms中）並不適合用背景圖片。
2、是img標簽引入的圖片，可以使用延遲載入的方式來載入，在實際載入圖片之前先用js檢查窗口寬度，然後載入不同解析度的圖片，比如寬度<=480,就載入80px寬度的圖片，480 < 寬度 <= 768，載入120px的圖片， 寬度> 768則載入160px的圖片，如果寬度是600px怎麼辦呢，通過百分比來縮放120px的圖片達到合適的結果。這樣做的好處是對於移動設備來說，下載的圖片會小一些，減少網頁載入的時間。但是問題是豎屏向橫屏切換或者擴大瀏覽器窗口寬度時圖片會由於放大而產生一定的模糊感。
3、響應式設計中對於圖片的考慮應該從布局設計就開始，盡量使圖片在各個窗口寬度下的尺寸不要相差過大，通過排布更多的內容而不是擴大圖片的尺寸來填充由於瀏覽器窗口擴大帶來的空間。這樣可以有效的減少圖片放大模糊的問題。
4、圖片設置 max-width 至於是不是要設置多張不同尺寸的圖片 應該是看你的需求到底是針對哪些人群 如果設置多張建議兩張就夠了 設置一張稍微大點的 等比縮放也是不錯的選擇個人習慣是設置寬度跟max-width

2. 響應式切圖是什麼

響應式切圖可以去了解一下媒體查詢。通過媒體查詢當前設備視圖區的寬度，來調整整體頁面的布局。

響應式切圖更多的是我們要用web前端開發傳統應用程序，我們做pc端，移動端，各種響應式，web 游戲，web 企業管理系統，web 移動程序，開發一個大規模項目，html5游戲，甚至用js開發傳統高級語言才能做的資料庫交互，不用後台語言，就靠我們js做後台。

響應切圖誤區：

響應式切圖大家都有個誤區，覺得切圖就是把圖片切出來，其實並不完全是這樣，首先處理的是什麼類型的頁面圖片型（EDM 或活動著陸頁等）、圖文型（門戶網站或電商網站等）、界面型（Web App 等），把圖片切出來這個過程是叫切片。

響應式第二個是體積，所以切圖時候一定注意少用圖片工具，採用div+css布局更能減小網頁體積是表現與內容分離。

3. 響應式圖片技術的思想是什麼呢

響應式圖片技術思想：不僅要同比的縮放圖片，還要在小設備上降低圖片自身的解析度。這個技術的實現需要使用幾個相關文件，我們可以Github上獲取。包括一個JavaScript文件(rwd-images.js)，一個.htaccess文件，以及一些範例資源文件。大致的原理是，rwd-images.js會檢測當前設備的屏幕解析度，如果是大屏幕設備，則向頁面head部分中添加BASE標記並將後續的圖片、腳本和樣式表載入請求定向到一個虛擬路徑"/rwd-router"。當這些請求到達伺服器端，.htacces文件會決定這些請求所需要的是原始圖片還是小尺寸的"響應式圖片"，並進行相應的反饋輸出。對於小屏幕的移動設備，原始尺寸的大圖片永遠不會被用到。響應式設計，就是同一個頁面文件，在不同的設備端呈現不同的樣子。在我看來，它的缺點有頁面載入的代碼多了，導致文件增大了，影響載入速度。為了適配不同的設備，響應式設計需要大量專門為不同設備打造的css及js代碼，這影響了頁面載入速度。尤其是js代碼，若處理不好，在配置低的機子上瀏覽會很卡。

雖然可以通過某些技術選擇性地載入響應式設計代碼，但瀏覽器對這方面的機制支持還不夠完善。在響應式設計中，圖片、視頻等資源一般是統一載入的，這就導致在低分辯率的機子上，實際載入了大於它的顯示要求的圖片或視頻，導致不必要的流量浪費，影響載入速度。雖然現在有各種智能判斷設備特性而載入不同圖片或視頻的技術，但瀏覽器支持同樣不夠完善。對大型門戶或電商網站來說，響應式設計目前確實不太適合。

4. 如何解決響應式網站圖片響應問題

如果圖片是以背景方式存在，這種比較好解決，可以採用媒體查詢，為不同尺寸的顯示終端設置不同圖片。但，如果是網頁中插入的圖片解決起來就比較復雜一點了。
一、採用srcset屬性，如下代碼
<img src="默認圖片" alt="" srcset="1倍大圖 600w 200h 1x, 2倍大圖 600w 200h 2x, 小圖 200w 200h">
srcset裡面是根據媒體查詢條件顯示不同圖片，跟上面差不多一樣，表達方式不一樣，1x表示顯示器像素密度顯示倍數。
兩者結合的方式實現，各大瀏覽器最新的版本基本都支持，但是IE系列的不支持，比較嚴重的問題是QQ瀏覽器以IE為內核，微信瀏覽器不支持，而微信在國內的使用率非常高，加之微信公眾平台的微官網是客戶的常見需求,好的解決辦法是使用Picturefill。
二、採用picture元素，如下代碼
<picture alt="">
<source src="大圖路徑" alt="" media="(min-width: 640px)">
<source src="小圖" alt="" media="(max-width: 639px)">
<img src="默認圖片" alt="" alt="">
</picture>

5. jquery如何實現響應式圖片切換

需要js+css配合，我給您找段代碼吧。

JS代碼

$(function(){
$(".mmy").click(function(){returnfalse;});
varflipDelay=5500;
varflipCount=$("div.banner_footera").size();//圖片總數
varflipId=1;
varflipId1=0;
varflipTimer=null;
varflipTimer1=null;
vari=0;
varflip=function(){
if(flipCount<2)return;
$("div.banner_footera").removeClass("current");
$($("div.banner_footera").get(flipId)).addClass("current");
$($("div.banner_footera").get(flipId)).css("current");
$("div.banner>a:visible").fadeOut();
$($("div.bannera").get(flipId)).fadeIn("slow");
flipId=(flipId+1)%flipCount;
flipTimer=window.setTimeout(flip,flipDelay);
}
flipTimer=window.setTimeout(flip,flipDelay);
$("div.banner_footera").click(function(){
clearTimeout(flipTimer);
flipId=$("div.banner_footera").index(this);
flip();
returnfalse;
});
varflipserver=function(){
$("div.index_server_box>a:visible").fadeOut();
$($("div.index_server_boxa").get(flipId1)).fadeIn("slow");
}
$("a.index_server_left").click(function(){
flipId1=(flipId1-1)%3;
flipserver();
returnfalse;
});
$("a.index_server_right").click(function(){
flipId1=(flipId1+1)%3;
flipserver();
returnfalse;
});
vardocumentWidth=$(window).width();
varleft=(documentWidth-310)/2;
varright=left+306;
$("div.services_boxdiv.left").css("width",left+"px");
$("div.services_boxdiv.right").css("width",right+"px");
$(window).resize(function(){
vardocumentWidth=$(window).width();
varleft=(documentWidth-310)/2;
varright=left+306;
$("div.services_boxdiv.left").css("width",left+"px");
$("div.services_boxdiv.right").css("width",right+"px");
});
});

html樣式

<divclass="banner_box">
<divclass="banner">
<ahref=""class="banner1"><imgsrc="img/banner1.jpg"alt="視覺為您解決網站建設中企業品牌形象問題"/></a>
<ahref=""class="banner2"><imgsrc="img/banner2.jpg"alt="獨具匠心的網頁設計讓您的網站與總部同"/></a>
<ahref=""class="banner3"><imgsrc="img/banner3.jpg"alt="針對用戶需求，提供高品質網站設計服務"/></a>
<ahref=""class="banner4"><imgsrc="img/banner4.jpg"alt="網站建設公司團隊的力量"/></a>
<ahref=""class="banner5"><imgsrc="img/banner5.jpg"alt="招聘網頁設計師"/></a>
<divclass="banner_footer">
<aclass="a1current"><imgsrc="img/a13.jpg"alt=""/></a>
<aclass="a2"><imgsrc="img/a14.jpg"alt=""/></a>
<aclass="a3"><imgsrc="img/a15.jpg"alt=""/></a>
<aclass="a4"><imgsrc="img/a16.jpg"alt=""/></a>
<aclass="a5"><imgsrc="img/a17.jpg"alt=""/></a>
</div>
</div>
</div>

css樣式

div.banner_box{height:430px;overflow:hidden;background:url(../img/b1.jpg)repeat-x;}
div.banner_boxdiv.banner{width:990px;height:430px;overflow:hidden;margin:auto;position:relative;}
div.banner_boxdiv.bannera{border:0;}
div.banner_boxdiv.bannera.banner1img{margin-left:200px;}
div.banner_boxdiv.bannera.banner2img{margin-left:236px;}
div.banner_boxdiv.bannera.banner3img{margin-left:250px;}
div.banner_boxdiv.bannera.banner4img{margin-left:231px;}
div.banner_boxdiv.bannera.banner5img{margin-left:245px;}
div.banner_boxdiv.bannerdiv.banner_footer{position:absolute;width:120px;height:20px;top:30px;right:0;z-index:100;}
div.banner_boxdiv.bannerdiv.banner_footera{float:left;width:19px;height:19px;cursor:pointer;}
div.banner_boxdiv.bannerdiv.banner_footera.current{background:url(../img/a13_1.jpg)centercenterno-repeat;}
div.banner_boxdiv.bannerdiv.banner_footeraimg{border:0;margin:3px003px;}

6. 如何讓圖片按比例響應式縮放，並自動裁剪的css技巧

img寬度設置100%，高度auto,包裹的img的div設置成overflow:hidden;可自動去掉多餘部分

7. 如何在網頁中製作響應式的SVG圖像

SVG（可縮放矢量圖形）：可縮放矢量圖形是基於可擴展標記語言（標准通用標記語言的子集），用於描述二維矢量圖形的一種圖形格式。它由萬維網聯盟制定，是一個開放標准。
SVG圖片格式的優勢：
1．任意放縮。
用戶可以任意縮放圖像顯示，而不會破壞圖像的清晰度、細節等。
2．文本獨立。
SVG圖像中的文字獨立於圖像，文字保留可編輯和可搜尋的狀態。也不會再有字體的限制，用戶系統即使沒有安裝某一字體，也會看到和他們製作時完全相同的畫面。
3．較小文件。
總體來講，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下載也很快。
4．超強顯示效果
SVG圖像在屏幕上總是邊緣清晰，它的清晰度適合任何屏幕解析度和列印解析度。
5．超級顏色控制。
SVG圖像提供一個1 600萬種顏色的調色板，支持ICC顏色描述文件標准、RGB、線X填充、漸變和蒙版。
6．交互X和智能化。SVG面臨的主要問題一個是如何和已經佔有重要市場份額的矢量圖形格式Flash競爭的問題，另一個問題就是SVG的本地運行環境下的廠家支持程度。

8. 響應式網頁中圖片的處理方式

圖片分為背景圖片和通過img標簽引入的圖片，前者可以通過media query自動的切換不同解析度的版本，但是在不支持background image size的瀏覽器中背景圖片無法無級的調整大小（也就是在media query切換css的點上可以換一張不同解析度的圖，但是沒法兒獲得兩張解析度中間大小的版本），而且在很多情況下（比如cms中）並不適合用背景圖片。

如果是img標簽引入的圖片，可以使用延遲載入的方式來載入，在實際載入圖片之前先用js檢查窗口寬度，然後載入不同解析度的圖片，比如寬度<=480,就載入80px寬度的圖片，480 < 寬度 <= 768，載入120px的圖片， 寬度> 768則載入160px的圖片，如果寬度是600px怎麼辦呢，通過百分比來縮放120px的圖片達到合適的結果。

這樣做的好處是對於移動設備來說，下載的圖片會小一些，減少網頁載入的時間。但是問題是豎屏向橫屏切換或者擴大瀏覽器窗口寬度時圖片會由於放大而產生一定的模糊感。

我覺得響應式設計中對於圖片的考慮應該從布局設計就開始，盡量使圖片在各個窗口寬度下的尺寸不要相差過大，通過排布更多的內容而不是擴大圖片的尺寸來填充由於瀏覽器窗口擴大帶來的空間。這樣可以有效的減少圖片放大模糊的問題。

9. html+css左邊是兩列右邊是圖片請問怎麼布局成響應式

用兩個div，左邊div浮動並包含ul層，右邊div浮動包含img。至於樣式，左右兩邊的div按照比例設置個百分比寬度，給個媒體查詢media當小於一定程度，左右div寬度為100%。ul中的li則設置寬度為50%，img設置100%就行了

10. 網站里用JS文件做圖片廣告，怎麼把這個圖片廣告做成響應式的

使用css3進行各個屏幕端的css樣式構造，如：

.wd{
width:1280px;
height:200px;
background:red;
}

@media(max-width:1280px){
.wd{
width:960px;
height:160px;
bakcground:yellow;
}
}

每范圍的屏幕大小均可定義不同的css.