桌面和移动视图中的动态图像

Question

我正在研究WordPress主题，正在寻求帮助。我是CSS和样式世界的新手。我要在首页上放置10张图片，每张图片都将直接链接到子页面。我想让它们动态化，在桌面上每行显示5条，在移动视图中每行显示1条。我知道基本的HTML，可以添加图像，但是它们是静态的，不是动态的，并且在侧面和每行之间都有空白。

这就是现在的样子

这就是我想要的样子

我希望移动设备显示相同的全屏图像。在此部分中，它使我能够仅为此文本块部分（单行输入框）添加CSS。 我尝试过调整图像的大小并使用基本的HTML，当然，这并没有给出我想要的结果。 谢谢。

Answer 1

您可以使用Flexbox完成此操作。

如果将图像包装在<div>元素中，并应用以下样式，则将使容器占据100％的可用空间，并且如果有5张以上的图像将被包装移到新行。

.image-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

然后在每个图像元素上，再次为其赋予一个唯一的类名称（这样，该样式将不适用于您网站上的所有图像元素），然后像这样应用width: 20%;样式：

.my-image-class {
    width: 20%; /* Makes its so there are 5 images per row */
}

然后，您将需要应用@media查询，以便在较小的屏幕尺寸上更改这些图像的宽度。 You can read more about media queries here

@media screen and (max-width: 600px) {
    .my-image-class {
        width: 100%; /* Makes its so there is only 1 image per row */
    }
}

对于不同尺寸的设备，您可能需要包括更多媒体查询，尤其是平板电脑，您可能会认为5张图像太小。您可以在上面的类似示例中看到更多有关媒体查询的示例。

body{
    margin:0; /* This is only here for the example, don't include it in your site */
}

.image-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

img {
    width: 20%;
}

@media screen and (max-width: 700px) {
  img {
      width: 100%;
  }
}

<div class="image-container">
        <img src="https://www.w3schools.com/howto/img_snow.jpg" />
        <img src="https://www.w3schools.com/howto/img_forest.jpg" />
        <img src="https://www.w3schools.com/howto/img_mountains.jpg" />
        <img src="https://www.w3schools.com/howto/img_snow.jpg" />
        <img src="https://www.w3schools.com/howto/img_forest.jpg" />
        <img src="https://www.w3schools.com/howto/img_mountains.jpg" />
    </div>

注意：运行代码段时，您可能需要将其显示为全屏，然后打开开发人员控制台（F12）来更改屏幕的大小才能看到它的实际效果。