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图像并排占据浏览器窗口的整个宽度

回答

相关问题