问题标签 [fluid-images]

这可能不是一个简单的问题，但我尽力了。

我有这个示例站点： http: //lotvonen.tumblr.com/ 我有一小段 javascript，它自动计算内部浏览器窗口的高度并将该数字设置为图像包装器 div 的高度。包装器内的图像高度是包装器的 100%，因此我可以在所有正常屏幕尺寸上获得漂亮的全屏图像。这在宽于高的屏幕（台式机、笔记本电脑等）上非常有效。

但！

对于比宽高的屏幕（智能手机、iPad 等），图像会从侧面被剪裁。我不希望这样，所以我有一个临时解决方案，当浏览器屏幕最大宽度为 1024 时，媒体查询将高度分配给自动，宽度分配给 100%，这样就不会发生剪辑。但这不是一个很好的解决方案，并且在某些分辨率下会中断。它还会以较低的分辨率（例如 800x600）破坏我的 JS。

这是JS：

这是我的CSS：

这是div：

我如何做到这一点，当浏览器窗口的高度大于宽度（例如 720x1024）时，图像会按宽度调整，而当浏览器窗口的宽度大于高度（例如 1024x720）时，图像会像它们一样调整现在（按高度，使用 JS）。这可能吗？是否有一个简单的 CSS 解决方案或者我需要更多地使用 JS？

提前致谢！

我在让 Chrome 和 Safari 正确显示容器图像上方的翻转 div 时遇到问题。我所做的有时会起作用，但是在调整页面大小时，您有时会看到翻转 div 和图像容器之间存在 1 或 2 个像素的小间隙。

我在这里做了一个演示：http: //jsfiddle.net/eJNsS/9/

截屏

HTML

CSS

jQuery

感谢您的帮助

我有两个容器的标记。第一个设置为“位置：绝对”，所有 4 个“坐标”在整个站点上展开（left=right=bottom=top=30px）。

在该容器内部是另一个容器，其高度设置为“100%”和“display:inline-block”（“inline-block”，因为第二个容器应仅水平扩展至所需宽度）。

第二个容器内部是一个高度设置为“100%”、宽度设置为“自动”的图像，因此图像始终与两个容器一样高，并且仍然具有正确的比例。

我需要这个第二个容器，因为我想在这个容器内放置一些绝对定位的元素，以便始终出现在图像的右侧。

问题如下：在 Firefox 中，第二个容器不会随着图像的自动宽度水平增长/扩展。它保持在图像的原始宽度。在 Safari/Chrome 中没有问题，只有 Firefox。

在这里您可以找到一个示例小提琴：http: //jsfiddle.net/EGRCQ/ 第一个容器是蓝色的。在此您将找到第二个容器（红色），并在此容器内找到示例图像。如果您将输出窗口的高度降低到 180 像素以下，您将看到问题（红色容器变得可见），或者您只需使用 Firebug 检查其宽度。

HTML

CSS

谢谢，

丹尼尔

我正在尝试在可调整大小的DIV. 图像必须保持其比例并且永远不会超过 100%（宽度和高度）——即使包含DIV大于图像。

图像还必须水平和垂直居中。Chrome 和 Safari 完美地做到了这一点 - Internet Explorer 10 没有。

我已经设置了一个快速的jsfiddle来说明这个问题。

HTML：

和CSS：

尝试在 Chrome 中将框的大小调整为小于 100% 的宽度和高度，您将得到类似于以下图像的内容：

小于 100% 高度：

小于 100% 宽度：

然而，Internet Explorer 10 仅缩放高度。宽度不会低于 100%，这是主要问题。

我可以让 IE 缩放宽度，类似于 Chrome/Safari，但它需要将DIV高度（是的，高度）设置为较低的值，比如 10px，这在 imo 中有点奇怪。

我知道可以在 javascript 中动态缩放图像，但是当 Internet Explorer 应该能够正确处理缩放时，我认为不需要额外的 javascript。

我将我网站的图片保存在 Picasa 中……因为我们知道我们可以像这样设置图片的大小。

http://lh5.ggpht.com/-i97UI0TXchE/UatpZd-E3tI/AAAAAAAAAFg/HUu-QK63ce0/w900-h0/running-sml.jpg

该部分w900-h0 表示，图片大小为：width900px 和height0（自动）。

所以我需要 w900-h0根据设备的视口自动更改图像的这个 url（实际上是部分），我知道我可以使图像变得流畅，只需将它们设置为 max-widht:100%; 通过css，但在这种情况下，图片的大小并没有变小，只是视觉上很小。

如何 w900-h0通过 java 脚本更改部分，例如当视口为 480 时，更改 url w300-h0等等。

我在 Safari / Firefox 中的图像间距有问题。我正在开发网站的移动版本，所有图像都使用基于百分比的宽度，因此它们具有响应性。

出于某种原因，在 Safari / Firefox 中，联系栏（页脚）上存在间距问题。它在 chrome 中完美运行，但 Safari 中“地图”图像右侧有黑色空间，而 Firefox 中“地图”图像左侧有黑色空间。

有 7 张图片跨越页脚容器的宽度，它们的宽度相加为 100%（3 张图片分别为 10%、3 x 20%、1 x 30%）

你可以在这里查看

www.conchandmedia.com/new_mobile/index3.html

最大宽度未设置，因此请将浏览器调整为手机的宽度。

关于造成这种情况的任何建议都会很棒。

谢谢

我正在尝试将流畅的图像用于我正在从事的响应式项目。但是，我所看到的一切都只是告诉我为图像设置一个最大宽度，它应该可以工作。它确实有效，除了此处看到的基于 px 的容器宽度：http: //codepen.io/anon/pen/cCfsF

基于 px 的父母是否有可能拥有流畅的图像？

我的 HTML 代码是：

我的CSS是：

首先，我只写了部分代码。这是一个单独的 html 文件，将作为时事通讯邮寄给人们。我在这里使用表格，因为据我所知，这是迄今为止我们得到的最佳选择？好吧，那个问题是我的图像。我通常使用 img{max-width: 100%;}，因此图像永远不会覆盖文档的边缘，而是会自动缩小。当我使用表格时，我无法让它工作。对不起，非常混乱的代码，再次，我没有写它:)

这里还有一个预览链接

我有一个网站，我有 2 个用户

问题一。用户 A 不添加横幅图像。所以我们必须放大他们的头像。当放大它时，我变得扭曲了。

问题 B. 如何添加高斯模糊

问题 C. 然后我如何使该图像流畅

代码点火器 PHP

希望你能帮忙

当其流体宽度（基于百分比）容器太小而无法显示整个图像时，如何使图像保持居中？

如何将图像居中在它的容器内

这意味着当容器太小时它应该显示图像的中间而不是侧面。