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

【问题标题】：4 Images side by side to take up entire width of browser window4 图像并排占据浏览器窗口的整个宽度
【发布时间】：2013-03-20 07:30:02
【问题描述】：

我有 4 个图像（宽度和高度都相同）并排显示在网页的最顶部，但诀窍是需要占据整个浏览器宽度 $(window).width()在 jQuery 中。

我的问题是：

首先，这可能吗？

如果是这样：

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

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

【问题讨论】：

我不确定你想做什么。你说你不希望图像拉伸但占据整个宽度
我有 4 张图片需要填满浏览器的整个宽度。显示的任何宽度。我不希望图像在宽度上拉伸，但也许缩小尺寸是我唯一的选择。无论如何，建议在每张图片上使用什么尺寸宽度？
我认为你需要这样的东西adaptive-images.com
图片之间可以有空格吗？一张图不会有帮助的。
图像之间没有空格...我会尝试在 Photoshop 中拼凑一些东西来说明。 @btevfik - 我不能使用它，因为不幸的是服务器没有 PHP 或 APACHE 支持！

标签： html image side-by-side

【解决方案1】：

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

【讨论】：

注意：1 张图片优于 4 张图片，如果您想使用 1 张图片并将其宽度设置为 100%；
图片是实物图片，不是纯色图片。拥有纯色图像没有任何意义，在这种情况下，我只会做background-color
o，这只是为了确保它正在运行 ignore background-color:blue;如果你真的看它，它们就是图像。
@SolomonClosson 好的，使用这个例子，我猜你想要这样的东西jsfiddle.net/btevfik/j7L4h/1
o，出于某种原因，我认为您想要 2 张图像在顶部，然后再在其下方 2 张图像。我现在编辑了

【解决方案2】：

如果您担心可扩展性，我建议您将 4 张图片合并为 1 张图片。然后，您还可以指定图像的尺寸，这有助于加载时间，因为浏览器不必计算每个图像的尺寸（如果您给它宽度大小的百分比，则需要这样做）。如果这是针对某种背景，也许，编辑最后一张图像，当浏览器扩展到比图像尺寸更大的宽度时，它会永远重复（例如 CSS 中的 background-repeat）......

【讨论】：