Question

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

如果你去http://digitaldemo.net/landmark/并俯视底部，那就有一个像这样编码的水平图像列表：

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

在480px res或更低的屏幕上，列表变为3个图像而不是5个，但我也想像桅顶图像一样调整图像大小。我能够通过添加max-width:100%来调整标头图像的大小，但这对于此图像列表不起作用。

任何帮助将不胜感激！

谢谢，

辛西娅

Answer 1

首先，通过显示和隐藏两个不同尺寸的基本相同的元素，我认为你从一个完全错误的方面接近问题：从可用性的角度来看（如果一个有屏幕阅读器的用户访问您的网站？），从编码标准的角度来看（臃肿的代码，难以维护，DRY）和 SEO 的观点（重复内容？关键字填充？）。

其次，您使用相同的id有两个不同的元素。这不应该发生：the ids must be unique.

第三，解决您的问题：为了通过CSS动态调整图片大小，您必须将其维度设置为百分比。在你的情况下，我会将CSS设置为这样的东西：

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

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

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

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

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

1 个答案: