CSS 图像适合宽度和高度

Question

我正在尝试使图像适合其容器。 问题是，我只能将它设置为适合宽度width: 100%或 height height: 100%但不能同时设置。

基本上它应该检查天气容器的长度或高度与图像宽度和高度（标准化）相比是否更小，并对其进行调整。 它也应该使图像居中。

这是 Windows 照片查看器中的标准行为。 图像始终可见，居中并保持比例。 我正在努力使它完全像那样。

PS：我更喜欢 css 解决方案。 但是如果不可能/很痛苦，js也可以。

PSPS：对不起，如果这是重复的。 我在互联网上搜索并发现了类似的问题，但似乎没有一个有正确的答案。

Answer 1

对此有几种解决方案。 他们没有一个是完美的。 这通常取决于您是否想要裁剪图像。

如果您对裁剪没问题，可以尝试以下操作：

<div class="image"></div>
<style>
    .image {
          width:250px;
          height:150px;
          background-image:url('http://lorempixel.com/400/200/');
          background-size:cover;
    }
</style>

如果您不希望它被裁剪，那么它将取决于您想要如何布置图像（或图像）。 下面是几个例子：

• http://healy.rocks/gallery1 - 响应式画廊布局
• http://healy.rocks/gallery2 - 带有 mansonry.js 的 Pinterest css 布局
• http://healy.rocks/gallery3 - 简单的行 css 布局
• http://healy.rocks/gallery3b - 带有 rowGrid.js 的 Google 图像 css 布局

Answer 2

您可以使用 CSS background-image设置图像，如下所示：

div{
    width: 200px;
    height: 200px;
    background-image: url("http://i.imgur.com/cjgKmvp.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

演示： https : //jsfiddle.net/ue49awaL/8/