Question

我有一个有尺寸的容器，宽度为600，高度为400。另外我有2张图片，其中一张尺寸为600（宽度）* 1，另一张尺寸为1 * 400（高度）。有没有一种方法可以使用宽度或最大宽度将第一张图像放入容器，第二张图像使用高度或最大高度？感谢。

Answer 1

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

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

否则你必须使用javascript并自己做数学。

有没有办法让第一张图像适合容器使用宽度或最大宽度，第二个使用高度或最大高度？

简而言之：不。

希望这会有所帮助：）

编辑：以下是img标记的示例：http://jsfiddle.net/sn3uu0uw/2/

Answer 2

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

结果证明还有另一种方法可以做到这一点。

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

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

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

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

3 个答案: