4圖像並排佔據瀏覽器窗口的整個寬度

我有4個圖像（所有寬度和高度都相同），我想並排顯示在網頁的頂部，但技巧是這需要佔用jQuery中的整個瀏覽器寬度$(window).width()。4圖像並排佔據瀏覽器窗口的整個寬度

我的問題是：

首先，這是可能的嗎？

如果是這樣的：

什麼是對所有的瀏覽器寬度做到這一點的最佳方式（或大部分他們）？
它應該是1圖像而不是4？
這兩種方式的優缺點是什麼？（1張圖片與4張圖片，反之亦然）？
我是否必須使用jQuery或其他語言來計算屏幕寬度併爲每個不同大小的屏幕寬度加載不同大小的圖像？或者這可以用CSS本地完成？
推薦使用什麼寬度尺寸，全部4張圖像，或者如果我製作這些圖像1張圖像，推薦使用什麼寬度？

注意：我不想展寬圖像，因爲這會導致圖像看起來扭曲，但是如果我有大的圖像並縮小它們的大小，則會影響頁面的加載（降低性能）。如何做到這一點，使我不必在外觀和/或性能上做出犧牲？如果可能的話，我也希望它在手機中看起來是正確的......但這不是一個重要的優先事項，但如果可能的話，會很好。

來源

2013-03-19 Solomon Closson

我不知道你想做什麼。你說你不想讓圖像伸展，但佔用整個寬度 – btevfik 2013-03-19 23:01:01

我有4個圖像需要填充瀏覽器的整個寬度。顯示任何寬度。我不希望圖像寬度拉伸，但也許調整大小是我唯一的選擇。無論如何，每張圖片上推薦使用什麼尺寸的寬度？ – 2013-03-19 23:05:38

我認爲你需要像這樣的東西http://adaptive-images.com/ – btevfik 2013-03-19 23:06:58

圖像需要設置爲父元素寬度的50％。在我的例子是父元素是人體：

<img class='half-width-img' src='http://wallpapers.free-review.net/wallpapers/42/Big_wave.jpg'/> 
<img class='half-width-img' src='http://wallpapers.free-review.net/wallpapers/42/Big_wave.jpg'/> 
<img class='half-width-img' src='http://wallpapers.free-review.net/wallpapers/42/Big_wave.jpg'/> 
<img class='half-width-img' src='http://wallpapers.free-review.net/wallpapers/42/Big_wave.jpg'/>

的CSS：

.half-width-img{ 
width:25%; 
height:auto; 
float:left; 
} 
html,body{ 
margin:0 0 0 0; 
padding:0 0 0 0; 
}

http://jsfiddle.net/j7L4h/2/

來源

2013-03-19 23:23:53 npage

注意：1圖像比4好，如果你想要使用1圖像並將其寬度設置爲100％; – npage 2013-03-19 23:26:08

圖像是實際圖像，而不是純色圖像。這樣做沒有任何意義，有純色圖像，在這種情況下，我只會做'background-color' – 2013-03-19 23:26:15

o，那只是確保它運行的東西忽略background-color：blue;如果你真的看着它，它們就是圖像。 – npage 2013-03-19 23:27:43

如果可能的話，如果您關心可伸縮性，我會推薦將4張圖片製作成1張圖片。您也可以指定圖像的尺寸，這有助於加載時間，因爲瀏覽器不必計算每個圖像的尺寸（如果您爲寬度尺寸給出了百分比，則需要這樣做）。如果這是針對某種背景，或許編輯最後一張圖片的方式是，當瀏覽器展開到比圖片尺寸更大的寬度時，它會一直重複（例如CSS中的背景重複）...

來源

2013-03-19 23:16:45

4圖像並排佔據瀏覽器窗口的整個寬度

回答

相關問題