问题标签 [fluid-images]

因此，制作流畅图像的经典方法是使用 img css 上的最大宽度/高度组合。

但是我处于一种情况，我实际上希望图像根据容器的高度限制而不是其宽度来调整大小。我认为简单的属性交换就可以解决问题，但显然不是那么简单。检查小提琴波纹管。如果我将容器（包装）的宽度设置为固定的像素尺寸，则图像可以正常工作。但是，如果我将 img css 更改为

并强制像素高度，什么都没有发生。

jsfiddle：请参阅下面的更新

只是为了让您更深入地了解我正在努力实现的目标。我将有许多全窗容器一个一个放在一起。每个容器都应该占据整个窗口空间。这就是为什么我需要图像根据容器高度来调整其尺寸（我知道我可能不得不求助于 jquery 来强制容器的高度）。

感谢您的任何见解

更新！

我创造了两个小提琴来更好地说明我的最终目标。

我希望能够堆叠每个与整个窗口一样高的容器。流畅地放大或缩小图像以帮助实现这一目标。

fiddle1：包装元素设置为 100% 宽度+高度。如果宽度减小，图像会流畅地调整大小。

http://jsfiddle.net/1geyww63/

fiddle2：包装元素设置为给定的像素高度。我希望/想象/交叉手指，图像会流畅地调整大小，太适合所有内容，并且容器的设定高度会受到尊重。然而，这不会发生。

http://jsfiddle.net/1geyww63/4/

我希望我已经让自己更容易理解了。我不想在那里提供太多信息。我的主要问题仍然是如何使用高度“中心”方法而不是宽度来流畅地调整图像大小。

当我尝试使图片可调整大小时遇到​​问题，我解释说：

• 我有一个适合窗口的 div“叠加层”；
• 在这个 div 里面我有另一个 div “imgActive”，它将包含一些以窗口为中心的图片；
• 里面的这些图片无论大小都必须适合窗户。

但是，正如您在这个小提琴上看到的那样，里面的图片水平适合（宽度变化）但是当您垂直调整窗口大小时，它根本不会调整大小（高度仍然相同）。

我该怎么做才能使它起作用？改变高度？

谢谢你的时间。

嗨，我正在尝试创建一个照片显示，我可以在其中列出多个不同大小的图像，以使它们能够适应各种空间而不会留下空白点。可以在此站点上观察到我正在尝试实现的示例：http ://www.morgannorman.com/

这是我的 html 的预览以及我如何设置图像：

<div class="feature-list"> <div class="feat" id="one"> <img src="galleries/display/pic1.jpg"> <img src="galleries/display/pic6.jpg"> <img src="galleries/display/pic3.jpg"> <img src="galleries/display/pic4.jpg"> <img src="galleries/display/pic5.jpg"> <img src="galleries/display/pic2.jpg"> <img src="galleries/display/pic3.jpg"> <img src="galleries/display/pic4.jpg"> <img src="galleries/display/pic1.jpg"> <img src="galleries/display/pic2.jpg"> <img src="galleries/display/pic3.jpg"> <img src="galleries/display/pic4.jpg"> </div> </div>

和我的 CSS：

在我的 Typo3 扩展中，我展示了很多流畅的图像，产品列表视图。仅当由于某种原因我的服务器上缺少一张图像时，T​​ypo3 才会生成全屏错误，因此整个网站都无法正常工作。

我认为有三种方法可以防止它：

1) 配置 Typo3，使其忽略损坏的图像 url。有谁知道这是否可能？

2）让Fluid在生成之前检查图像是否存在。不知道这是否可行？

3）在发送到前端之前，使用控制器检查图像是否存在。只是由于图像很多，它使用了大量的处理。

我正在使用 div 和在流体布局中嵌套的 img 制作基本标题。我对此有点生疏，我无法为我的爱弄清楚如何确保嵌套在 div 中的图像缩放而不缩放到它变得更小的父 div 的点。

编辑：更新了 codepen 链接，显示如何使用 min-height 在压缩图像时不起作用

HTML：

CSS：

为了更好地衡量正在发生的事情的快速说明：

并说明我想要发生的事情：

编辑：请注意，此处的图像没有被挤压，如果您将图像设置为具有等于其父 div 的最小高度，则会发生这种情况。但是溢出是隐藏的。您还可以看到我不介意图像被裁剪。

任何帮助表示赞赏。

我有一张图片，width: 656px其中height: 60px包含我的菜单的背景图片。每个菜单按钮在文件中都有一个已知位置，因此我的菜单 ›media‹ 的菜单按钮位于 (188x, 0y), 104w, 30h：

每个li都有自己唯一的 id。

如果您希望将值作为百分比（因为这可能是一个可能的解决方案，但我仍然无法弄清楚），那就是文件的 (28.659%x, 0%y), 15.854%w, 50%h。

实际的菜单可能是 1em 高或 2em 高或其他。

所以，我试图在 CSS 中以某种方式实现：

• 保持li的高度。
• 保留纵横比（对于 ›media‹，它是 3.466:1）
• 使每个<li>的宽度成为其高度的 3.466 倍
• 用源背景填充它，相应地拉伸或收缩背景。

好吧，在某种伪代码中，这很简单：

但是我如何在 CSS 中做到这一点？

我有一排图像坐在一个流体宽度的容器中，图像之间有一个固定宽度的空间。如果容器缩小，图像需要流畅地调整大小并仍然适合容器的整个宽度。

为此，我使用了 white-space: nowrap; 和显示：表格；在容器上并显示：table-cell；在它的孩子身上。

然而，图像似乎以不同的因子缩放，导致一些图像非常小，而另一些则仅略小一些。我需要它们按比例缩放，我不知道怎么做！任何帮助将不胜感激！

HTML：

CSS：

有关现场演示，请参阅此笔： http ://codepen.io/anon/pen/PZPjop

我有一个场景，其中不同尺寸的图像出现在 50% 页面宽度的列中。

在列宽超过图像的原始宽度的大屏幕上，图像应呈现为其原始宽度，同时仍保持流畅。

图像尺寸各不相同（即横向与纵向），因此不能将单一宽度或高度应用于 img 元素。我可以将父元素限制为与将显示的最大图像宽度相匹配的最大宽度，但是宽度较小的图像一旦变得流畅就会扩展得太宽。

基本结构是：

使用这个 CSS：

我可以向 img 元素添加一个指示方向的数据属性，使用它来应用最大宽度，但这需要站点编辑器进行更多工作，我需要避免这样做。因此，我寻求一个纯 CSS 的解决方案......但我被困住了。

有任何想法吗？

我正在尝试为我的一个网页实现流畅的图像背景。它在 Chrome 中完美运行，但我无法在 Firefox 中运行。我有两个正方形的 png 图像，当浏览器窗口调整大小时，它们会按比例调整大小。

这是html：

这是CSS：

问题是我在 Firefox 中看不到任何输出。如果我不使用display:flex那么我可以在 Firefox 中看到这两个方块，但是我的网页需要使用 flexbox，所以我不能丢弃它。

任何人都知道为什么它不能在 Firefox 中工作？

这是 Chrome 版本的屏幕截图：55.0.2883.87 m

这是 Firefox 版本的屏幕截图：50.1.0

嗨，我有一个基于我网站中屏幕高度和宽度的流体容器。我希望图像始终填充容器，因为它会根据屏幕尺寸向任何方向扩展。所用图像的大小和纵横比会有所不同。

我在下面尝试了 html 和 css：

如果没有 max-height 和 max-width，如果 img 比容器小，这很有效，但如果图像以自然尺寸出现并被裁剪，则图像变大就不起作用。

jsfiddle 示例

是否可以仅使用纯 css 完成此任务？

更新 我也想避免使用背景图像作为解决方案，看看这是否可能只在 dom 中放置 img 标签，以便尽可能避免对 img 标签进行编程。