Question

我刚刚在我的网站上实施了一个星级评分系统，但我很难将图像与其他内容一起缩放。我正在使用的HTML代码是：

<ul id="aff_rating">
    <li><img src="/images/star_on.png" class="star_on starrating-1"></li>
    <li><img src="/images/star_on.png" class="star_on starrating-2"></li>
    <li><img src="/images/star_on.png" class="star_on starrating-3"></li>
    <li><img src="/images/star_on.png" class="star_on starrating-4"></li>
    <li><img src="/images/star_off.png" class="star_off starrating-5"></li>
</ul>

当用户调整浏览器窗口大小时，我需要缩小星标，就像页面上的其他图像一样。

Answer 1

您可以为图片和<li>容器定义百分比宽度，以便它们可以与其父容器一起进行相应缩放，也可以使用@media查询设置不同的大小。

您可以尝试以下两种方法：

基于百分比：

#aff_rating li {
    float:left;
    margin-right:6px;
    width:18%;
}

#aff_rating li img {
    width:100%;
    height:auto;
}

demo

@media基于查询：

@media screen and (max-width:767px) {
    #aff_rating li {
        width:30px; /* define a proper width that you think is right */
    }
}

demo（调整结果窗口以进行测试）

如何使这个图像列表响应（可扩展）？

1 个答案: