Question

当某人缩小页面时，我的图片不会随之缩小。我如何使这些图片随着窗口变小而变小？

作为初学者，我不太确定该怎么做。但是我在下面列出了一些代码，希望有人能帮助我。

<center>
<table>
<tr>
<td><a href="./krunker.html">
<img src="./krunker.jpg" alt="Krunker.io" height="500" width="1000" />
</a></td>
<td><a href="./bforce.html">
<img src="./bforce.jpeg" alt="Bullet Force" height="500" width="1000" />
</a></td>
</tr>
</center>

我希望当我缩小页面时，照片也可以，但是不会。我该怎么办？

Answer 1

您将需要使用CSS。以下是用于使图像具有响应性的一组通用CSS属性。

max-width: 100%，因此图像的缩放比例不会超出其原始分辨率，即变为像素化。如果您喜欢像素化图像，可以将其更改为width: 100%。
height: auto，因此图像比率得以保留。

注意：如果您不希望图像为固定大小，请不要设置width或height属性。

img {
  max-width: 100%;
  height: auto;
}

<img src="https://via.placeholder.com/1920x400/fc0">

Answer 2

我如何使这些图片随着窗口变小而变小？

可以使用“相对”单位（例如30vw）代替“绝对”单位（500像素）。

您可以使用此CSS使图像具有响应性：

img {
  width: 30vw;
}

在此处查看代码：https://codepen.io/marc-simplon/pen/byPgdQ

您可以阅读以获取有关CSS单元的更多信息： https://www.w3schools.com/cssref/css_units.asp

用户缩小页面时如何缩小元素？

2 个答案: