Html 如何针对不同尺寸的图像进行响应性设计？

我在api响应中得到了不同大小的图像。我已经在我的html页面中创建了一个表，我正在该表中显示这些图像。 我得到4张图片。 所以我设置了宽度 表为100%， tr为100%， td为25%， 图像为100%

<table>
    <tr>
        <td><img/></td>
        <td><img/></td>
        <td>>img/></td>
        <td><img/></td>
    </tr>
</table>

>img/>

当我减小窗口的大小时，td的宽度会响应，但高度保持不变。

---

我如何使td的高度（以及图像的高度）具有响应性

您只需使用引导功能即可获得响应图像。链接-

---

为什么不将自定义类命名为“img responsive”，并将这些属性添加到其中

.img-responsive {
   display: block;
   height: auto;
   max-width: 100%;
}

---

如果您拥有库使用的代码，则无需使用库

这是我课程的一部分，我们不允许使用bootstrap.：）因此，您可以看到该类

img responsive

的功能。我想你会发现一些东西。我的问题是我需要使用固定25%宽度的td。使用此代码，我的td中图像周围出现空白区域。为什么将

display:block

设置为image。图像表现为

块

和

内联块

。这不会有任何区别。我的问题是我需要为td使用固定25%宽度。使用此代码时，我的td中出现了图像周围的空白区域。当我使用此代码时，图像没有填满td的整个高度。使用表格不是一种响应性设计方法。您的问题中没有任何内容表明您正在使用实际的响应式设计，那么我应该做什么呢？尝试放弃使用表格的想法。我们在2k14。希望我能，明天截止日期。：）

.img-responsive {
   display: block;
   height: auto;
   max-width: 100%;
}

.img-responsive {
   display: block;
   height: auto;
   max-width: 100%;
}