如何使图像适合手机?HTML

Question

我创建了一个网站，有一张图片(640x640px(，但在手机上，你必须侧滚动才能看到全貌。有人知道我如何在手机上改变尺寸，但在桌面上保持不变吗？

这就是我目前拥有的

<pre>
<div>
<img style="object-fit: scale-down;"  src="gifs/preview.gif">
</div>

Answer 1

您想要使用：

img {
max-width: 100%;
}

Answer 2

因此，您可以为图像指定一个类名，然后在@media查询中使用该类名

@media only screen and (max-width: 600px) {
.classname {
width: 200px;
height: 200px;
background-size: 100% 100%;
}
}

然后给它任何你认为最适合你想要实现的尺寸

Answer 3

尝试将@media查询合并到css文件中。它将如下所示：

@media only screen and (max-width: 600px) {
img {
width: 50%;
}
}

因此，在上面的代码中，我们正在创建一个媒体查询，当屏幕小于或等于600px时，该查询将触发，然后将发生以下情况，在这种情况下，它将只占用父div的50%。

如果您仍然不理解，这里有一个资源：https://www.w3schools.com/css/css_rwd_mediaqueries.asp

希望这是有意义的：D