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

标签 html css

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

最佳答案

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

例如:

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

关于html - 具有不同屏幕尺寸的图像映射。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43104563/

相关文章:

javascript - 处理drop事件时如何定位游标索引?

javascript - 即时替换 css 文件(并将新样式应用于页面)

javascript - 如何在 html/javascript 中创建 "copy to clipboard"按钮

javascript - 使用 jquery 和 sqlite/json 的静态产品页面

html - 缓存 list 文件中的更改

javascript - 使用 jquery/ajax 刷新/重新加载 Div 中的内容

javascript - 旋转木马幻灯片和导航栏更改之间的 Bootstrap 延迟

c# - 尝试将外部网页加载到框架/对话框中

html - CSS3 flexbox 布局一行最多 3 个子项

javascript - 当我对一个元素使用 draggable 时,点击功能不起作用