Wordpress 如何在响应主题中动态调整图像列表的大小？

我正在构建我的第一个响应主题，这是我面临的两个问题中的第二个

如果你去看看底部，有一个 编码如下的图像的水平列表：

<ul>
<li>image 1</li>
<li>image 2</li>
<li>image 3</li>
<li>image 4</li>
<li>image 5</li>
</ul>

#scroll.mobile ul {
    width: 100%;
}

#scroll.mobile li {
    width: 33%; /* You wanted three images per row, right? */
}

#scroll.mobile li img {
    max-width: 100%;
}

图1
图2
图3
图4
图5

在480px分辨率或更低的屏幕上，列表变成3个图像，而不是5个，但我也希望 使图像像报头图像那样调整大小。我可以通过添加

max width:100%

来调整报头图像的大小，但这不适用于此图像列表

任何帮助都将不胜感激

谢谢

---

Cynthia

首先，通过在两种不同的尺寸上显示和隐藏基本相同的元素，我认为你从一个完全错误的角度来处理这个问题：从可用性的角度（如果一个带屏幕阅读器的用户访问你的网站怎么办？），从编码标准的角度（臃肿的代码，难以维护，）以及从SEO的角度（重复内容？关键字填充？）

其次，您有两个不同的元素使用相同的

id

。这不应该发生：

第三，解决您的问题：为了通过CSS动态调整图像大小，您必须通过百分比设置其尺寸

<ul>
<li>image 1</li>
<li>image 2</li>
<li>image 3</li>
<li>image 4</li>
<li>image 5</li>
</ul>

#scroll.mobile ul {
    width: 100%;
}

#scroll.mobile li {
    width: 33%; /* You wanted three images per row, right? */
}

#scroll.mobile li img {
    max-width: 100%;
}

通过这种方式，列表元素将占据整个窗口空间，每个列表项仅占其中的三分之一，并且包含的图像将限制在窗口的这三分之一