具有不同屏幕尺寸的图像映射。

Question

所以，如果你想要代码，我可以提供它！我为行星制作了一个网站，里面有一张大行星照片，我在上面使用了图像映射（来自W3Schools）。问题是，当我在更大的笔记本电脑上打开相同的网站时，由于我使用引导程序并且图像映射变得混乱，因此图像变大。这有什么解决方案吗？我可以对所有屏幕使用图像映射吗？

Answer 1

您需要为图片代码设置最大宽度，以使其不会变得那么大。您还需要为您所在的屏幕大小设置@media查询。但您也可以根据容器的大小来设置图像。 （例如）宽度：50％;

例如：

//Desktop or Landscape Tablet Screen Size
@media all and (min-width: 981px) {
img {
max-width: 400px;
}
}