问题标签 [responsive-images]

我在 css 中有这个图像，我想向它添加 bootstrap class:img-responsive以便它变得响应。如果它在 HTML 中很容易，但如何在 CSS 中做到这一点？

谢谢！

如何使图像根据屏幕尺寸自动调整大小？

我为图像添加了一个 css 属性，例如

但这会使小图像采用其所在容器的形式，如果容器很大，则小图像会拉伸并像素化。那么我是否只是为大图像创建特殊的 css 属性？我不希望图像填满它们所在的容器或 div。我只希望它们根据屏幕大小调整大小。表格也应该调整大小。我正在使用 div 和表格。

在不使用媒体查询的情况下，我需要一些指导来为管理页面制作响应式背景图像。背景图像需要响应浏览器窗口而不拉伸。

类似于此示例页面

我使用 bootstrap 3.3.6 来构建这个页面。管理员登录页面被分割为一个分屏。

• 左侧是登录区
• 右手边是一个背景图片，顶部有文字内容。

http://www.r1.jxt.com.au/Admin/login.aspx?ReturnURL=~%2fadmin%2fdefault.aspx

我需要我能得到的所有指导来实现这一点。谢谢！

我沿着这条线找到了几个查询，他们要么没有解决方案，要么他们的解决方案对我不起作用。我设置了媒体查询，最小的是最大宽度（700px），当我在桌面上预览网站时，我的浏览器设置为 iPhone 的宽度，预览效果很好。但是，当在我的实际 iPhone 上预览时，它只显示照片的一小部分。（在 Safari 和 Chrome 中。）我不确定 Android 设备，因为我没有要测试的设备。

编辑：完整网站http://www.dragonflyav.com

这是CSS：

我确定我错过了一些简单的东西，我尝试了上述几种变体，包括单独放弃每个不同的属性，但没有运气。我的 HTML 元标记如下：

我正在尝试有效地生成在网站上使用的响应式图像，但是在处理 gulp 中的现有文件和路径时遇到了一些麻烦。图像位于分层结构的文件夹中，其中pages的根目录有几个向下递归的子文件夹——其中大多数都有图像。

我当前的任务如下所示：

这有两个主要问题：

1. 图像被传送到与其源相同的文件夹中，而它们最好位于images源旁边的 - 文件夹中。
2. 如果再次运行该任务，它会根据源和先前生成的响应图像生成新文件。

该任务使用gulp-responsive-images，它利用 GraphicsMagick 来调整大小。我尝试使用gulp-changed (set as .pipe($.cached('pages'))) 来解决问题 2，但它似乎没有任何效果。

根据我当前的设置，如何解决问题 1 和 2？

我有一张以全浏览器屏幕为中心的图像，如下所示

我试图在不缩放的情况下获得图像响应。意味着我不想响应，图像应该很小。我只想在浏览器屏幕中心的最小尺寸上始终看到图像的中心部分。就像浏览器屏幕尺寸从小到大一样，应该看到图像的左右部分。

在较小的屏幕图像应如下所示，图像的宽度不应改变。也不应该有水平滚动。

HTML 代码

CSS代码

在上面，css我看到了图像的中心部分，但我得到了水平滚动。

任何人都请告诉我，我应该如何获得响应式图像（没有水平滚动）而不改变响应式图像大小？

编辑

'test.jpg' 是人物图像，而不是背景图像。背景图像不同。在这种情况下，人物图像应该表现得像背景图像

http://cdn.sixrevisions.com/0431-01_responsive_background_image_demo/responsive-full-background-image-demo.html

请建议我css的'test.jpg'应该如何？

我现在已经多次遇到这个问题，并且总是使用 CSS 和 JS 的组合来解决它，但是随着对响应式图像的支持越来越多，我一直在寻找一个更有说服力的解决方案。我只是试图不在移动设备上加载图像，同时保留语义（所以没有 CSS background-image），利用浏览器预加载（所以没有 JS 延迟加载）。

我怎样才能做到这一点？

我正在尝试创建一个具有整页背景图片的网站。我已经让它在桌面版本上工作，但是当我将它推送到github手机上并在手机上查看它时，背景图像只是顶部的一个长图像。我background-size: cover在我的css. 下面的屏幕截图。我怎样才能让它在移动设备上占据整个空间？谢谢 ：）

桌面版：

手机版：

html如下

我在我的 django 项目中使用 ckeditor。这是一个响应式页面，因此当页面宽度发生变化时，除了表格和图像之外，所有内容都会发生变化，它们保持相同的大小。我正在使用“安全”过滤器来渲染所有内容，它工作正常，但图像和表格不会调整大小。如何让它们响应不同的屏幕尺寸？提前致谢。

我问这个是因为在我的 Mac Retina 和 Google Chrome 开发者工具中，我看不到 srcset 中的其他图像。

它总是带来更大的形象。

我正在做的测试是： - 打开开发者工具 - 将我的窗口调整到接近图像分辨率 - 刷新页面

更新

在线示例： Srcset