1. 首页
  2. 问题列表
  3. 如何在html中使充满图像的表格保持屏幕宽度
提问者：小点点

如何在html中使充满图像的表格保持屏幕宽度


我正在使用HTML来创建一个网页，它有一个包含6个图像的表格，其中有2行3列，这是我的代码:

<table style="width:100%">
    <tr>
        <td><img src="House1.jpg"></td>
        <td><img src="House2.jpg"></td>
        <td><img src="House3.jpg"></td>
    </tr>
    <tr>
        <td><img src="House4.jpg"></td>
        <td><img src="House5.jpg"></td>
        <td><img src="House6.jpg"></td>
    </tr>
</table>

但是当我加载网页时，它会溢出到右边，我必须向右滚动才能看到所有的图像。 有什么办法可以解决吗？


共2个答案

匿名用户

做一些更改

  1. 使用display:block；
  2. 并使宽度:100%；以及高度:100%；

示例:

<img style="display:block;" width="100%" height="100%" src="House1.jpg" />

希望这会有帮助！

匿名用户

您可以简单地将图像大小（宽度和高度）设置为100%，以防止它们溢出

img {
  width: 100%;
  height: 100%;
}
<table style="width:100%">
  <tr>
    <td><img src="House1.jpg"></td>
    <td><img src="House2.jpg"></td>
    <td><img src="House3.jpg"></td>
  </tr>
  <tr>
    <td><img src="House4.jpg"></td>
    <td><img src="House5.jpg"></td>
    <td><img src="House6.jpg"></td>
  </tr>
</table>

相关问题