响应式图像图
我有一个响应式html布局中的现有图像映射。图像根据浏览器大小缩放，但是图像坐标显然是固定的像素大小。我必须选择哪些选项来调整图像地图坐标的大小？
问题答案：
您也可以使用svg代替图像映射。
.hover_group:hover {
opacity: 1;
}
#projectsvg {
position: relative;
width: 100%;
padding-bottom: 77%;
vertical-align: middle;
margin: 0;
overflow: hidden;
}
#projectsvg svg {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
<figure id="projectsvg">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080" preserveAspectRatio="xMinYMin meet" >
<!-- set your background image -->
<image width="1920" height="1080" xlink:href="http://placehold.it/1920x1080" />
<g class="hover_group" opacity="0">
<a xlink:href="https://example.com/link1.html">
<text x="652" y="706.9" font-size="20">First zone</text>
<rect x="572" y="324.1" opacity="0.2" fill="#FFFFFF" width="264.6" height="387.8"></rect>
</a>
</g>
<g class="hover_group" opacity="0">
<a xlink:href="https://example.com/link2.html">
<text x="1230.7" y="952" font-size="20">Second zone</text>
<rect x="1081.7" y="507" opacity="0.2" fill="#FFFFFF" width="390.2" height="450"></rect>
</a>
</g>
</svg>
</figure>
-
问题内容： 我有一个网站（g-floors.eu），并且我想使背景（在CSS中我为内容定义一个bg图像）也具有响应性。不幸的是，除了我可以想到的一件事外，我真的对如何执行此操作一无所知，但这是一个解决方法。创建多个图像，然后使用css屏幕大小更改图像，但是我想知道是否有更实用的方法来实现此目的。 基本上，我想要实现的是图像（带有水印“ G”）自动调整大小，而不会显示更少的图像。如果可能的话 我到目
-
问题内容： 我对前端开发和基础非常陌生。 我正在尝试成为响应时按比例缩小的全屏图像。 谁能告诉我我在做什么错？它可以正确缩放，但无法显示完整图像。我还希望将其放在移动设备上，这可能吗？ HTML： CSS： 问题答案： //HTML 要么 要么
-
问题内容： 我发现调整图像大小以使其具有响应能力很棘手。 我正在开发一个php应用程序，以自动将网站转换为响应版本。我有点卡在图像上。 我已经成功将包装类添加到网站上的每个图像，并且可以很好地调整图像的大小。 我的问题在于图像自然小于窗口，例如徽标和图标。我不想调整这些大小。 我的代码当前会转换： 变成： 我在哪里使用以下CSS： 这将调整所有图像的大小，但是我只希望它调整超出页面宽度的图像的大小
-
我试图达到的效果是这个网站上的第一张主要图片：http://shop.soot.me/ 据我所知，这是通过后台实现的，而不是通过<代码> https://jsfiddle.net/jzhang172/e1javm23/
-
我在img标记中使用.img响应类。图像非常小（42K），但当加载页面时，图像显示几秒钟相当大，直到缩小到适合容纳它的元素的大小为止。 我应该如何使用bootstrap处理响应性元素？
-
我有一个引导网格设置，在网格的一个单元格内有一个div浮动在右边，宽度为250px；当然，单元格内的文本遵循浮动的div轮廓并环绕它；有时我会在文本中添加一些应该填充单元格的图像（100%的宽度，img响应类，就像bootstrap做的那样）。我如何能让图像停止在浮动div如果存在在它的侧面？在我的设置，图像填充宽度正确，如果浮动不存在（或图像开始在它下面），这是完全正确的，但如果图像开始在它旁边