如何針對不同尺寸的圖片進行響應式設計？

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添加到圖像標簽，就是這樣。

由於您無法將引導程序添加到您的項目中，您可以簡單地在您的css file添加class並將class應用於您的img tag 。 該類所做的就是遵循。 這個代碼 -

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

Answer 2

為什么不將自定義類命名為“img-responsive”並將這些屬性添加到其中？

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

當您擁有庫使用的代碼時，無需使用庫！