如何在web编程中显示适合屏幕的图像列表

How to display a list of images fitting the screen in web programming

本文关键字：屏幕 图像 列表 显示 web 编程      更新时间：2023-09-26

我刚刚开始网络编程，我想知道是否有一个解决我的问题。

我有10张图片，我想根据屏幕大小显示它们。我的意思是，如果浏览器只能容纳两张图片，那么我希望是这样的:

Image1    Image2
Image3    Image4
...       ...
Image9    Image10

如果浏览器可以容纳2张以上的图片，比如4张，那么我希望是这样的:

Image1    Image2    Image3    Image4
...       ...       ...       ...
Image9    Image10

我已经将我的图像存储在json文件中:

{
  "images": [
    {"title": "Image One", "url": "1.jpeg"},
    {"title": "Image Two", "url": "2.jpeg"},
    {"title": "Image Three", "url": "3.jpeg"},
    ...
  ]
}

任何提示、建议、帮助、建议都将是非常感谢的。

您可以使用display:inline-block CSS属性来实现这一点。这里我将给出一些小的例子。

<div class="test"><img src="test.jpg" /></div>
<div class="test"><img src="test.jpg" /></div>
<div class="test"><img src="test.jpg" /></div>
<div class="test"><img src="test.jpg" /></div>
<div class="test"><img src="test.jpg" /></div>
<div class="test"><img src="test.jpg" /></div>
<div class="test"><img src="test.jpg" /></div>
<div class="test"><img src="test.jpg" /></div>
<div class="test"><img src="test.jpg" /></div>
<div class="test"><img src="test.jpg" /></div>
CSS

.test
{
display:inline-block;
}

在上面的演示中，图像将根据屏幕宽度占用空间。

你要做的是学习响应式设计/开发。请参考bootstrap框架。

http://getbootstrap.com

相关文章：