html - CSS 图像适合宽度和高度

Question

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

基本上它应该检查天气容器的长度或高度是否小于图像的宽度和高度(标准化)并使其适应。而且它还应该使图像居中。

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

PS:我更喜欢 css 解决方案。但是如果做不到/很痛苦，js也ok。

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 - 谷歌图像CSS布局 行网格.js