我如何用图片填充我的网页

How can I fill my webpage with images?

本文关键字：我的 网页 填充 何用图      更新时间：2023-09-26

我正在创建一个网页。。像往常一样。但我有个问题。假设我有一个名为"background"的div，在这个div中，我用<img>-tag加载了大量的图像。唯一的问题是图像上有float:left;，这使得它们落入一个新的行，因为它不能显示完整的图像。

然而，我想显示图像，这样你就可以看到它的一部分，但它从一侧延伸到另一侧，一直延伸到屏幕底部。我不想要滚动条之类的。有什么快速的方法吗？我需要使用javascript吗？或者我可以在css中解决这个问题吗？如果是这样，有人能给我指明正确的方向吗？：）

下面是我尝试做的一个例子。

我想你是在问逻辑？

start
get viewport width
determine a width for images that will tile evenly
create row of images
loop until rowcount*image height < viewport height
end

您举的例子中的网站在其主体上使用了overflow：hidden和width:110%。。。这就是显示局部图像的可能。

类似的东西？

<html>
<head>
  <style type="text/css">
    ul {display:block; width=100%;}
    ul li {float:left;}
    ul li img {width:150px;}
  </style>
</head>
<body>
  <div class="background">
    <ul>
      <li><img src="imgs/myimage01.jpg" alt="my image 1"/></li>
      <li><img src="imgs/myimage02.jpg" alt="my image 2"/></li>
      <li><img src="imgs/myimage03.jpg" alt="my image 3"/></li>
      <li><img src="imgs/myimage04.jpg" alt="my image 4"/></li>
      <li><img src="imgs/myimage05.jpg" alt="my image 5"/></li>
      <li><img src="imgs/myimage06.jpg" alt="my image 6"/></li>
      <li><img src="imgs/myimage07.jpg" alt="my image 7"/></li>
      <li><img src="imgs/myimage08.jpg" alt="my image 8"/></li>
      <li><img src="imgs/myimage09.jpg" alt="my image 9"/></li>
      <li><img src="imgs/myimage10.jpg" alt="my image 10"/></li>
      <li><img src="imgs/myimage11.jpg" alt="my image 11"/></li>
      <li>etc...</li>
    </ul>
  </div>
</body>
</html>

如评论中所述，源图像的形状和大小很重要。如果它们是标准化的，那就容易多了。

BTW在Firefox中使用Firebug来查找/测试网站的CSS布局。他们在您的示例中所做的是创建一个CSS类，该类将图像类的大小限制为左浮动。

高度：120px

宽度：95px

<img class="class_name" src="image_source"/>

只是为了使背景div中的所有图像的高度相同，假设高度为100px，并且所有图像都在一行中

#background {
   white-space:nowrap;
}
#background img {
   height: 100px;
}

如果不想在单行中，只需删除空白：nowrap

相关文章：