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

Question

我在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>

当我减小窗口的大小时，td的宽度正在响应，但高度保持不变。 如何使td的高度（以及图像的高度）响应？

Answer 1

您只需使用引导程序即可获得响应式图像。链接 - http://getbootstrap.com/css/#images

<img src="..." class="img-responsive" alt="Responsive image">

您只需添加插件并将上面的img-responsive类添加到图片代码中就可以了。

由于您无法在项目中添加引导程序，因此只需在class中添加css file并将此class应用于img tag即可。该课程的作用如下。这个代码 -

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

Answer 2

为什么不让你的自定义课程名为＆＃34; img-responsive＆＃34;并将这些属性添加到它？

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

当您拥有库使用的代码时，无需使用该库！