CSS 根据高度或宽度使图像适合容器

Question

我有一个容器，其大小为宽度 600 和高度 400。我还有 2 张图片，一张尺寸为 600（宽度）* 1，一张尺寸为 1 * 400（高度）。有没有一种方法可以使用 width 或 max-width 将第一张图像放入容器，而使用 height 或 max-height 将第二张图像放入容器？谢谢

Answer 1

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

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

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

Is there a way that I fit the first image to the container using width or max-width and the second one using height or max-height?

简而言之：没有

下面是带有 img 标签的示例：http://jsfiddle.net/sn3uu0uw/2/

Answer 2

.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.

Answer 3

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

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

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

会完成这项工作。这是 CSS3 东西。

CSS 根据高度或宽度使图像适合容器

CSS fit image to the container depending on the height or width

html

css

containers