问题标签 [responsive-images]

目前我的网站已设置为加载其中的完整图像，然后自动调整大小以适合屏幕。这是通过在 CSS 中将图像宽度设置为 100% 来完成的。虽然它工作得很好，但它似乎没有遵循标准，因为我没有在图像标签本身中指定宽度和高度。

我现在的想法是创建同一个网页的多个版本，唯一的区别是图像的大小。每个图像都有自己的文件名（如 image1small.jpg、image1medium.jpg 等）。

问题是大多数人希望立即看到更大的画面，但这对于小屏幕的人来说并不顺利，因为他们必须水平滚动才能看到整个画面。

我正在考虑将 javascript 放在顶部，将不符合屏幕标准的用户重定向到具有更好尺寸图像的页面。像这样的东西：

事情是页面重定向将发生在不满足页面屏幕分辨率要求的人身上。我不确定这是否可以称为偷偷摸摸地重定向到谷歌。

使用上面显示的代码将屏幕尺寸不兼容的用户重定向到正确的页面，这是一个好习惯吗？还是我应该采取不同的方法向用户显示正确大小的图像？

不管任何人给出的答案如何，我都觉得我需要为图像标签指定宽度和高度属性，并且我想坚持 HTML 4.01 严格的标准，以便该页面适用于所有人。

好的，情况就是这样：当视口大小为 800 像素或更大时，我们希望在 50% 的视口中显示图像，否则图像为 100%，因此 html 如下所示：-

或者我们可以通过 css 简单地执行以下操作：-

所以我们可以控制图像容器而不是图像本身，我的问题是是否存在将 size 属性视为最佳解决方案的条件？

注意：- 我知道在第一个示例中，图像大小将根据视口宽度而不是容器宽度计算

如何设置相对于自身高度而不是宽度的响应式比例图像？

简单地设置...

没有给我图像的比例尺寸。

我怎样才能做到这一点？

http://dfwcgi.com/approach/white-papers Live 站点，但忽略了事先使用 IE 进行故障排除。所有文章图像（通过图像和链接选项卡）对 IE11 都不响应。任何文章正文中的图像都符合要求并且具有响应性。我在不同的论坛上看到过这个“auto \9”，但找不到真正的解决方案。我已经更改了我的自定义 css 几次，但没有结果。这是一个火箭主题。我什至创建了一个 IE11 自定义 CSS 页面......没有运气。

真的很感激你的意见——这让我发疯了。

提前致谢！

是否可以在 html 中伪造一个看起来像真实但不存在的空图像？

例如，我有一个响应列，其中应该是一个 200x150px 的图像（它被设置样式：width: 100%; height: auto;因为它的响应）......但是如果没有图像，它应该被放置一个占位符，该占位符完全伪造一个真正的 200x150px 大小的图像的大小有。

我尝试了如下所示的图像标签，但它因此不起作用height: auto。关于那个奇怪的 src 看看这个。

可以用php生成一个空的png吗？

编辑：有些人提到了服务placehold.it。基本上这正是我需要的（在大多数情况下绝对足够），但因为这是一个 WordPress 插件，它也应该在没有互联网连接的情况下在本地运行。最好是没有外部服务的解决方案。

我正在创建一个必须响应的移动电子邮件模板（意味着没有 javascript）。

我想内联放置几个图像，随着屏幕变窄，这些图像会按比例缩小。我通过使用 css table 和 table-cell 来做到这一点，并让图像缩放。到目前为止没有问题。

然而，由于图像经常被电子邮件客户端阻止，我被要求创建一种灰色的占位符，在图像未加载时显示图像“alt text”。我希望这个占位符与包含的图像具有相同的大小，并且也可以以更窄的宽度进行缩放。

正如您在下面的小提琴中看到的那样，我已经走得很远了：http: //jsfiddle.net/ow7c5uLh/29/

HTML：

CSS：

但是，有两个问题：

1. 随着屏幕变窄并且图像被缩放，背景颜色从图像下方弹出。placeholder-div 与图像一样缩放，但它的高度（由浏览器计算）比图像高度多 5px。这种差异从何而来？
2. 当图像未加载时（尝试使图像 URL 无效），则占位符 div 的高度会崩溃。我怎样才能让它保持正确的高度？

仅供参考：实际使用的图像并不总是相同的大小，但我会知道它们的尺寸并可以计算它们的纵横比。我会将这些值（如 120px）内联写入，而不是像示例中那样在单独的 css 文件中写入。

提前感谢您的帮助！

我正在使用 CamanJs（一个图像处理工具）来编辑我当前的图像，并且我已经将 jCrop 与 CamanJs 集成以用于按照 http://v2-demos.jcrop.org/demos/camanjs.html这个源进行裁剪。它工作正常，但问题是，它适用于固定宽度的图像。但我需要使用响应式图像来做到这一点。这是一个实时网址： http: //128.199.175.24/editimg/crate-editor-popup.html 这是脚本：http: //128.199.175.24/editimg/js/corpCaman.js

我认为 CamanJs 不支持来自远程域的图像，所以我无法创建 jsfiddle。

如果有任何其他更好的 jquery 工具来处理图像（裁剪、亮度、色调、模糊等），请给我一个建议。

谢谢

我正在研究响应式设计，并制作了这样的图像代码——在 Chrome、Firefox 和 Safari 上看起来很棒。

但是，在旧的 Android 浏览器 v2.3.4 上，它不起作用并且图像被截断。为旧浏览器制作响应式图像是否有规则或技巧？感谢任何人的帮助！

我正在使用background-size: cover属性来制作具有背景图像响应的 div 。但它被剪掉了，这是不需要的。有什么方法可以避免剪裁并获得响应式图像？我什至尝试用 img 标签替换 div并使用背景大小的封面到 img 标签文章以使其看起来相似。问题仍然占上风。

这是具有背景图像的 div 的 css：

截图：被剪辑后（图片上面提到了分辨率）

实际图像：

我有一个简单的表单，我正在使用 php 将图像上传到数据库，我只保存图像位置（例如；img/example.png"）。

我的问题是如何创建响应式缩略图或如何以不破坏图像质量的方式显示图像。

是否有任何指导方针或如何或最佳实践，你们可以指导我。

非常感谢。