css图像自动调整大小不起作用

我正在尝试获取两列：

一个部门叫words and

其他ul称为快照，其中包含li图像

当前，当我调整图像大小而不是调整大小时，它只会移动到下一行…如何根据屏幕宽度调整它们的大小

下面是一个例子

<div class="main">
    <div class="subfooter">
    <div class="words">
        this is test messgae
        </div>

        <ul class="snaps">
        <li><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR6HIp-1dv221Es0Hk1E9OuQMzcavdw51paj4T0-zrZfxKgXmUXfA"/></li>
        <li><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR6HIp-1dv221Es0Hk1E9OuQMzcavdw51paj4T0-zrZfxKgXmUXfA" /></li> 

        <li><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR6HIp-1dv221Es0Hk1E9OuQMzcavdw51paj4T0-zrZfxKgXmUXfA"/></li>

        <li><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR6HIp-1dv221Es0Hk1E9OuQMzcavdw51paj4T0-zrZfxKgXmUXfA" /></li>

        </ul>
    </div>

 </div>

这是测试信息

下面是工作示例

---

这是因为图像具有固定的，使用百分比，而不是将其设置为200px

这就是我所做的：

.snaps li {
width: 50%;
float: left;
display: block;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}

.snaps li img{
    width: 100%;
}

---

添加以下内容而不是宽度200：

.snaps li img {
    max-width:100%;
    height:auto;
}

---

这应该是您正在寻找的：

您需要指定

元素的宽度，然后可以使用

宽度：100%；高度：自动，以便它们根据
元素的宽度调整大小

CSS:

试试这个。我更新了你的小提琴

.words {
    float: left;
    width: 45%;
    background-color: #996633;

}
.snaps {
    width: 45%;
    margin: 0;
    float: left;
    list-style-type: none;
}

.snaps li img {
    width:23%;
    float:left;
    margin:1%;
}

但所有四个都不会在一行中，我如何获得这些内容…因为它现在位于单词div的下方…我希望它位于单词div的旁边，因此它是2列而不是1列，这样当我调整到tMobile的mediascreen时，它应该是1列，在某个宽度之后，它应该是1列，而不是1列调整屏幕大小仍然比桌面大屏幕y是图像没有调整大小…特别是因为单词和快照div都在%yes…嘿，一旦屏幕变小，单词和快照div排成一列，我们能让它们占据100%的宽度吗…现在我们看到单词div（棕色）继续仅占45%，即使它们在单列中对齐图像作为列对齐我希望它们作为行并在快照div内调整
.words {
    float: left;
    width: 45%;
    background-color: #996633;

}
.snaps {
    width: 45%;
    margin: 0;
    float: left;
    list-style-type: none;
}

.snaps li img {
    width:23%;
    float:left;
    margin:1%;
}