问题标签 [responsive-images]

我正在尝试构建一个混合应用程序，我需要获取背景特定部分的大小。

• 背景具有这些属性： background-size: 100% 100%; background: url('back.jpg') no-repeat center center fixed;
• 我想在该背景上放置一个 div 并将 div 的大小设置为背景精确部分的大小。

这是一张图片来说明我想做的事情： 背景示例，上面有一个红色矩形

上面背景图像上的红色矩形是我想在响应式屏幕上计算大小的图像部分的示例。

我知道如何使元素在背景上遵循正确的绝对位置，这要归功于这个主题Position element over background image，但不知道如何将它们调整到正确的比例。

任何人都可以帮忙吗？

我想使用Jekyll Responsive Image 插件srcset为我的帖子图像生成带有/sizes属性的适当响应图像。

但我也希望能够在一个提供实时预览的软件中编辑我的帖子，比如MacDown，它只理解图像的标准 Markdown 语法。

这就是为什么我想知道是否有一种方法——某种插件——告诉 Jekyll 转换图像的标准 Markdown 语法，我会将其放入我的 Markdown 文件中……</p>

![alt text](path/to/image.jpg)

…进入Jekyll Responsive Image 插件特有的语法：

{% responsive_image path: path/to/image.jpg alt: "alt text" %}

然后，Jekyll 可以继续使用 Kramdown 生成 HTML……</p>

我还在插件的 Github 中创建了一个问题，但更一般的答案也会很好，并且可能对其他需求有用。

Hi I am redesigning my website, I am a novice at JS and CSS, pretty good with HTML 5. I am working on a new responsive web site with a gallery page of images using Lightbox.

The Beta Site and Gallery Page is here: http://www.sound-enclosures.com/FanAir/index-3.html

I have a Link to " img src= " to the Thumbnail and a "a href= " to the BIG Image.

Problem is only One of Four Images load. It's the First Image on the Page The Blue Picture. This seems to work correctly. The other Images try to link, however they just Hang Up on Loading. I have verified the file names, locations, checked the URL's etc.

I am using Lightbox.min. script before "/head" and bootstrap.min.js at the bottom of my page before "/body"

The Monster Template I am using was furnished with jQuery v1.11.1, I have read in the Stackoverflow Forums that JQuery 1.8 seems to work better with Lightbox, I have not tried that and would be reluctant to do so as it might mess up other pages.

Can any one take a look and possibly provide some assistance, guidance?

Thank you all in advance.

Scotty

这是我目前正在处理的网站：http: //perlaparra.com/rnr/site/

我已将宽度设置为 100%，但仍然没有全宽显示。我很感激我能得到的任何帮助。

谢谢！:)

在响应式网站上确定将哪些图像资产提供给移动设备和桌面设备的最佳做法是什么？期望的结果是为桌面用户提供大的高分辨率图像，为移动用户提供较小的图像。

这是我在这里的第一个问题，所以如果我的问题可能不正确，请原谅。

在照片报道中，我有大约 30 张高分辨率图片，我通过 CSS 加载这些图片，因为我认为它可能比使用“img”标签具有速度优势。

这是 30 张图片之一的代码：

但是在 HTML 中，当我使用 CSS 中指定的“img”标签时

使用 CSS 方法和“img”的图像缩放不同。“img”似乎挤在移动设备上。我希望图片表现得像 CSS 类。

它看起来很棒，并且对 CSS 方法有响应，但我通过 alt 文本失去了 SEO 功能，这对我的照片报道来说是不行的。

我开发了一个响应式网站设计。这是secondgf。在我的一篇文章中，我将所有图像都安排在了中心位置。它在桌面上正常工作，所有图像似乎都在中心正确对齐，但是当我在移动设备上打开它时，所有图像都在右侧对齐。我之前写的帖子也有图像在中心对齐，它在移动和桌面上都能完美运行。这是工作帖子- secondgf.com 我试图找出帖子有什么问题，但没有运气。它托管在博客上。

我使用 Bootstrap 3.3.5 构建的网站包含我想要响应的图像，因此我为它们分配了 .img-responsive 类。但是，它们在 Firefox 中没有响应（当我将窗口调整为更小的尺寸时，图像不会变小，因此会出现滚动条）。在 Internet Explorer 中，它工作得很好。我还没有尝试过任何其他浏览器，我读到了可以通过添加“宽度：100%;”来修复的错误。但这并不能解决我的问题（它唯一要做的就是在我缩小窗口时使图像更大，以便包含它的列是该行中唯一的列。随着我继续制作，它会再次变小窗口更小，但是当它的大小我想要更大的屏幕时，滚动条再次出现。我尝试添加“宽度：100％;”内联到html标签，我尝试将它添加到我的 CSS 中。我还尝试添加“显示：块；” “最大宽度：100%；” 和“高度：自动；” 也一样，但这并没有改变任何东西。添加 !important 也无济于事。我不知道还能尝试什么！

这是我的图像代码（仅适用于行中的这一列）：

和CSS：

我能做些什么？

更新：

媒体查询：

嗨，我有一个页面，我使用响应式 svgs 作为图标。这是 js.fiddle：

https://jsfiddle.net/4yp65vu0/

注意这个CSS：

和 HTML：

我在 svg 图标和周围的容器周围放置了一个红色边框。为了让它们反应灵敏，我将它们绝对定位在相对 div 中，使用 padding-bottom 等于比例比率技巧。然而， svg_contatiner2 填充了整个列宽。我只想紧贴 svg 图标，让文本在没有大量空间的情况下凸起。

我希望标题不会太混乱。

我正在使用自适应图像来检测访问者的屏幕大小，并自动创建、缓存和提供网页嵌入 HTML 图像的设备/断点适当的重新缩放版本。

现在......有些人想将图像保存在他们的手机/智能手机上，但是使用自适应图像来提供更小尺寸的图像（以节省带宽/下载时间）会给他们提供更小尺寸的图像 - 而不是大小合适的图像或原始图像图片。

有人对以下内容有任何想法吗？

1. 提供放大的图像
2. 如果人们想保存它们，可以使用原件