html - 如何使表格 HTML 中的图像大小相等

问题描述

我正在使用 HTML 制作带有图像的表格，并且我希望这些图像具有相同的大小，但我得到了这个：

图像具有相同的分辨率，我的 CSS 是这样的：

 img {   
  display: block;
  margin: 10px auto;
  width: 50%;   
  height:50%;     
 }

HTML

<table>
<tbody>
<tr>
        
        <td style="vertical-align:middle;color: #666633; text-align: center; font-weight: bold; ">name1</td>
        <td style="vertical-align:middle;color: #666633; text-align: center; font-weight: bold; ">name2</td>
</tr>

      <tr>
        <td><img src="../assets/img/image1.jpg" alt="image"></td>

        <td><img src="../assets/img/image2.jpg" alt="image" ></td>
      </tr>
      <tr>
        <td><button type="button" class="btn btn-success btn-sm" [routerLink]= "['/detail',100]" style="margin-bottom:50px">View</button></td>

        <td><button type="button" class="btn btn-success btn-sm" [routerLink]= "['/detail',101]" style="margin-bottom:50px">View</button></td>
      </tr>
</tbody>
</table>

标签： htmlcss

您的代码是正确的，但我建议您使用vw而不是%因为它会帮助您使您的网页/网站具有响应性，但您也可以选择使用%。我附上了源代码和输出，用它检查你的代码，它肯定会有所帮助。有时是网络浏览器的问题，所以大多数时候使用谷歌浏览器并没有这样的问题。

img{ 
  display: block; 
  margin: 2vw; 
  width: 10vw; 
  height: 10vw;
}

<!DOCTYPE html>
<html>
<head>
      <title>Images in Table</title>
</head>
<body>
  <table>
    <tr>
        <td><img src="Images\sample1.jpg" alt=""></td>
        <td><img src="Images\sample2.jpg" alt=""></td>
    </tr>
  </table>
</body>
</html>

html - 如何使表格 HTML 中的图像大小相等

问题描述

解决方案

推荐阅读