Question

我正在网站上工作，我使用以下HTML代码并排显示3张图片：

<table ><tr>
<td><img src="https://i.imgur.com/OePsoQN.png" alt="fivera"  height="283.5" width="504"  ></td>
<td><img src="https://i.imgur.com/PeZkl4t.png" alt="fivera"  height="283.5" width="504" ></td>
<td><img src="http://i.imgur.com/fqvrtec.png" alt="fivera"  height="283.5" width="504" ></td>
</tr>
</table>

它在我的电脑上看起来非常好，但是当我调整浏览器大小时，图片的大小保持不变，并且几乎有一个水平滚动条显示它会破坏整个网站。在过去的20分钟里，我一直在谷歌搜索这个问题，但没有任何解决方案对我有用。

非常感谢您的建议。

Answer 1

无论浏览器窗口的大小如何，图像都将保持相同的大小。每个已建立的图像都有静态宽度和高度属性。

height="283.5" width="504"

调整图像以及调整窗口大小的一种方法是使用javascript函数进行调整大小。

<body onresize="ResizeFunction()">

快速简便的方法是执行以下操作：

<table ><tr>
<td><img src="https://i.imgur.com/OePsoQN.png" alt="fivera" width="100%"></td>
<td><img src="https://i.imgur.com/PeZkl4t.png" alt="fivera" width="100%"></td>
<td><img src="http://i.imgur.com/fqvrtec.png" alt="fivera" width="100%"></td>
</tr>
</table>

这会强制图像调整到表格给出的空间的100％。试试看。高度将自动保持纵横比与宽度。

Answer 2

首先，我将这些组合成一个div元素，以便您可以一次操作它们。如果你想要高质量的.css应该使用。

说这个div的id为img：

public class ViewMenu extends View {
Paint paint = new Paint();

public ViewMenu(Context context) {
    super(context);
    paint.setColor(Color.WHITE);
  }

@Override
public void onDraw(Canvas canvas) {
    canvas.drawLine(0, 0, 1000, 1000, paint);
    canvas.drawLine(500, 1000, 700, 10, paint);
    }
}

然后在.css中执行以下操作：

<div id="img">

表格中的图片不会调整大小

2 个答案: