1

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

我的问题是：

首先，这可能吗？

如果是这样：

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

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

4

2 回答 2

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/

于 2013-03-19T23:23:53.420 回答
1

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

于 2013-03-19T23:16:45.010 回答