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

Question

伙计们，如果你想要代码，我可以提供!我为行星制作了一个网站，上面有一张行星的大照片，我在上面使用了图像映射(来自 W3Schools)。问题是，当我在更大的笔记本电脑上打开同一个网站时，图像会变大，因为我使用的是 Bootstrap ，图像映射会变得困惑。有什么解决办法吗？我可以对所有屏幕使用图像映射吗？

Answer 1

您需要为图像标签设置最大宽度，这样它就不会变得太大。您还需要为您所在的屏幕尺寸设置 @media 查询。但您也可以根据容器大小的百分比设置图像。 (例如)宽度:50%；

例如:

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