響應式全屏圖像沒有質量損失，可能嗎？

計算器的喂社區，我希望你有一個愉快的一天:)響應式全屏圖像沒有質量損失，可能嗎？

單刀直入：我開始在我的新組合（我是藝術總監bytheway）計劃。我最初的想法並不是只讓組合產生反應（我認爲1024x768像素一直高達2560x1600像素），但通過全屏幕瀏覽器圖像也可以獲得一些不錯的工作預覽。

正如你所期望的，我encautered一個問題。設計爲完全適合2560x1600像素的圖像不會調整爲允許說1440x900像素而不失去質量或失真。

所以我真的可以使用你的幫助和體驗傢伙......是否有一個「完美」的圖像大小，將精確調整大小以下決議：1024x768px，1280x800px，1280x1024px，1440x900px，1920x1080px，2560x1600px。它甚至有可能做到這一點？

我真的很感謝你的幫助。感謝提前:)

來源

2011-08-26 Domas Rimsa

沒有，有沒有這樣的事情，因爲它們代表了幾個不同的形狀或縱橫比，這將完全擴展到所有這些不同尺寸的圖像。縮放寬度與高度不同的圖像會導致圖像失真，並且通常看起來不太好。

的選項如下：

縮放圖像（比例）爲多，因爲它可以縮放，使其充滿屏幕的一個維度和並不完全填補了其他維度。這是可以顯示的最大的未剪切圖像。
縮放圖像（按比例），直到它完全填滿屏幕。如果屏幕與圖像的形狀不完全相同，則圖像將需要超縮放以填充屏幕。顯示圖像會沿一個方向裁剪圖像的一部分。這是圖像縮放以完全「填滿」屏幕的正常方式。如果圖像是在邊緣周圍創建一些「額外」和不重要的空間，而不是裁剪某些關閉的空間，因爲過大的縮放填充將不會導致任何問題。
按照選項＃1縮放圖像，並使用協調的背景色填充圖像未覆蓋的任何屏幕區域。
創建與圖像形狀完全相同的容器或框架，並縮放圖像以填充該圖像。
非比例地縮放圖像以準確填滿整個屏幕。這會使圖像在一個方向上拉伸得比另一個更多，圖像會變形一些，但是沒有任何東西會被裁剪，整個屏幕將被覆蓋。圓形的東西將是橢圓形的，其他形狀將會被扭曲。

在所有情況下，您都希望分析可能的顯示尺寸，並選擇最接近形狀的源圖像，以儘可能多的目標屏幕尺寸。

來源

2011-08-26 06:37:08 jfriend00

而不是試圖擴展到所有這些不同分辨率的整個圖像，考慮保持縱橫比（寬度：高度），而縮放盡可能接近（但大於）所要求的分辨率，然後裁剪圖像。

縮放的圖像，並且總是改變縱橫比導致失真。

來源

2011-08-26 06:41:58 Feanor

您可以使用Photoshop或任何其他軟件準備許多圖像，然後使用響應式設計，您將能夠顯示適合不同屏幕尺寸的圖像。

這裏是一個很好的和簡單的尖端僅CSS/HTML：

成分

與所需比率（透明比率conserver.png）透明PNG圖像
標籤
d的不同圖像ifferent視圖端口（retina.jpg，desktop.jpg， tablet.jpg ...）

的想法是打開一個標籤，並分配給它一個透明圖像（與我們的期望的比率）。我們還添加了全部使用HTML的class =「響應式圖像」。

<img src="img/transparent-ratio-conserver.png" class="responsive-image">

在CSS中，我們設置背景大小，以適應和我們選擇圖像的寬度。

.responsive-image{ 
    width: 100%; 
    background-size: 100% 100%; 
}

最後，我們爲每一個視口的右側圖像：

/* Retina display */ 
@media screen and (min-width: 1024px){ 
    .responsive-image{ 
     background-image: url('../img/retina.jpg'); 
    } 
} 
/* Desktop */ 
@media screen and (min-width: 980px) and (max-width: 1024px){ 
    .responsive-image{ 
     background-image: url('../img/desktop.jpg'); 
    } 
} 
/* Tablet */ 
@media screen and (min-width: 760px) and (max-width: 980px){ 
    .responsive-image{ 
     background-image: url('../img/tablet.jpg'); 
    } 
} 
/* Mobile HD */ 
@media screen and (min-width: 350px) and (max-width: 760px){ 
    .responsive-image{ 
     background-image: url('../img/mobile-hd.jpg'); 
    } 
} 
/* Mobile LD */ 
@media screen and (max-width: 350px){ 
    .responsive-image{ 
     background-image: url('../img/mobile-ld.jpg'); 
    } 
}

您可以從here下載試玩。

來源

2013-06-23 07:16:03 Yassin

你如何處理風景與手機肖像？ – jophde

當用戶更改設備的方向時，Web瀏覽器自動獲取新寬度，並根據樣式表文件調整視圖。 – Yassin

響應式全屏圖像沒有質量損失，可能嗎？

回答

相關問題