Respify 是个简单的响应式图像库，可以从一系列 span 子节点的 data-media 和 data-src 属性解析图像，使用媒体查询来选择图像。在线演示
Respify可以在图像标签或任何其他标签上使用，但背景选项应设置为true。从span子节点数组中重新指定wil pop，这意味着将首先解析列表中的最后一个节点。如果Respify找到一个匹配的媒体查询，它将使用相应的图像并停止搜索。
<span id="default-responsive" class="responsive-img" data-alt="This is an example of a responsive image"> <span data-src="img/yacht_race@mobile.jpg" data-media="(max-width: 30em)"></span> <span data-src="img/yacht_race@wide-mobile.jpg" data-media="(min-width: 30em) and (max-width: 48em)"></span> <span data-src="img/yacht_race@tablet.jpg" data-media="(min-width: 48em) and (max-width: 60em)"></span> <span data-src="img/yacht_race@desktop.jpg" data-media="(min-width: 60em) and (max-width: 80em)"></span> <span data-src="img/yacht_race@hires.jpg" data-media="(min-width: 80em)"></span> <noscript><img src="ext/img/yacht_race@hires.jpg" alt="A yacht race"></noscript> </span>
-
问题内容： 我有一个响应式html布局中的现有图像映射。图像根据浏览器大小缩放，但是图像坐标显然是固定的像素大小。我必须选择哪些选项来调整图像地图坐标的大小？ 问题答案： 您也可以使用svg代替图像映射。
-
问题内容： 我有一个网站（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处理响应性元素？