Question

我有4个图像（所有相同的宽度和所有相同的高度），我想在网页的最顶部并排显示，但诀窍是需要占用整个浏览器宽度{{1在jQuery中。

我的问题是：

首先，这可能吗？

如果是这样的话：

对所有浏览器宽度（或大多数浏览器宽度）执行此操作的最佳方法是什么？它们）？
应该是1张图片而不是4张吗？
两种方式的优点/缺点是什么（1张图像与4张图像，反之亦然）？
我是否必须使用jQuery或其他语言来计算屏幕宽度并为每个不同尺寸的屏幕宽度加载不同尺寸的图像？或者这可以用CSS本地完成吗？
建议在所有4张图片上使用什么宽度尺寸，或者如果我将这些图像设为1张图像，建议使用的宽度是多少？

注意：我不想将图像拉得更宽，因为这会导致图像看起来扭曲，但是如果我有大图像并将其缩小，则会影响页面的负载（降低性能）。如何做到这一点，以便我不必在外观和/或性能方面做出任何牺牲？如果可能的话，我也希望它在手机中看起来正确......但这不是一个重要的优先事项，但如果可能的话会很好。

Answer 1

如果您关注可扩展性，我建议如果可能的话，将4个图像分成1个图像。然后，您还可以指定图像的尺寸，这有助于加载时间，因为浏览器不必计算每个图像的尺寸（如果您给出宽度尺寸的百分比，则需要执行此操作）。如果这是针对某种背景，也许，编辑最后一个图像，当浏览器扩展到比图像尺寸更大的宽度时，它会永远重复（例如CSS中的背景重复）......

Answer 2

图像需要设置为父元素宽度的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/

4个图像并排占据浏览器窗口的整个宽度

2 个答案: