Question

我正在创建一个网页。但我有一个问题。让我们说我有一个名为＆＃34;背景＆＃34;在这个div中，我使用<img>-tag加载了大量图像。唯一的问题是图像上有float:left;因为它无法显示完整图像而使它们落入新行。

但是，我希望显示图像，以便您可以看到它的一部分，但是它从一侧延伸到另一侧，一直延伸到屏幕的底部。我不想要任何滚动条等等。有这么快的方法吗？我是否需要使用javascript或者我可以在CSS中解决这个问题，如果是这样的话，有人可以指出我正确的方向吗？：）

以下是我尝试做的example。

Answer 1

我猜你在问这个逻辑吗？

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

Answer 2

您提供的网站作为示例使用溢出：隐藏和宽度：110％在他们的身体...这是使部分图像可以显示的原因。

Answer 3

这样的东西？

<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>

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

Answer 4

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

身高：120px

宽度：95px

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

Answer 5

为'背景div中的所有图像制作相同的高度，假设100px高度，并且所有图像在一行中

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

如果不想单行，只需删除white-space：nowrap

如何在我的网页上填写图片？

5 个答案: