Question

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

基本上应该检查天气容器长度或高度与图像宽度和高度（标准化）相比较小并使其适应。它也应该使图像居中。

这是Windows Photo Viewer中的标准行为。图像始终可见，居中并保持比例。我试图让它完全像那样。

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 - Google图片css layout wth rowGrid.js

Answer 2

您可以使用CSS Backtesting_Fun设置图片，如下所示：

Runtime.getRuntime().exec("cmd /c start your/path/yourbat.bat");

DEMO：https://jsfiddle.net/ue49awaL/8/

CSS图像适合宽度和高度

2 个答案: