CSS根据高度或宽度将图像适合容器答案

【问题标题】：CSS fit image to the container depending on the height or widthCSS根据高度或宽度将图像适合容器
【发布时间】：2015-05-27 09:43:05
【问题描述】：

我有一个大小为 600 且高度为 400 的容器。另外我有 2 张图片，一张尺寸为 600（宽度）* 1，一张尺寸为 1 * 400（高度）。有没有办法让我使用 width 或 max-width 将第一个图像适合容器，而使用 height 或 max-height 将第二个图像适合容器？谢谢。

【问题讨论】：

发布一些你尝试过的代码？
如果你能向我们展示你目前拥有的东西会很好
我四处搜索并找到了许多可能的答案，但没有一个对我有用..让我搜索一下他们的帖子..

标签： html css containers

【解决方案1】：

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

原来还有另一种方法可以做到这一点。

<img style="height: 100%; width: 100%; object-fit: contain;" />

将完成这项工作。这是 CSS3 的东西。

【讨论】：

【解决方案2】：

img 标签是唯一可以自动缩放以匹配图像大小的元素。

根据您的情况，您可能能够使用固定宽度和高度的容器宽度并使用background-size: contain。

否则您必须使用 javascript 并自己计算。

有没有一种方法可以让我将第一张图片放入容器中宽度或最大宽度，第二个使用高度或最大高度？

简而言之：没有。

这是一个带有img 标签的示例：http://jsfiddle.net/sn3uu0uw/2/

【讨论】：

可以使用display: inline-block 和width: auto 放大div 的宽度以适应图像。或者，无论如何，我已经在自动宽度缩放 div 中放置了多个内容。如果图像具有尺寸，则图像应该没有什么不同
@SidneyLiebrand 你能举个例子吗？我无法重现：jsfiddle.net/sn3uu0uw 或者您的意思是该容器中的 img 标签？
我的意思确实是一个 img 标签，我可能误解了这个问题。使用图像标签应该是可能的；）我会看看我是否可以让它工作以确保完整性
好吧，我看不出这与我的答案有何不同？
因为它使用 img 标签而不是背景图片。无论如何：jsfiddle.net/sn3uu0uw/3 更新了我的意思；）

【解决方案3】：

.body {
    background: url("img_flwr.gif");
    background-size: 100% auto;
    background-repeat: no-repeat;
}
    the above class will good enough for 600px width image.similarly write another class with background-size: auto 100%; which should be applicable for 400px height image.Apply the classes using jquery.

【讨论】：