Question

我希望两个图像一起缩放并适合视口。

我试图制作一些最大宽度参数，但由于图像具有不同的宽度（相同的高度），因此它们的缩放比例不同。

这是我的代码：

HTML

<div class="container">
  <div class="images">
    <img src="https://cdn.img42.com/3bb8d43ca012533b5ceb2ac691b7c953.png">
    <img src="https://cdn.img42.com/9bc6aad61f6967d1ec85a15dbfc462e0.png">
  </div>
</div>

CSS

.container {
    width: 100%;
    float: left;
    background:orange;
}

.images {
    width: 100%;
    margin: 0 auto;
    text-align:center;
}

.images img {
  display:inline-block;
}

http://jsfiddle.net/8fc7hnff/5/

应该真的很容易，但我找不到合适的解决方案。

谢谢！

Answer 1

如果您尝试将图像放入div并且这些图像与div具有不同的宽高比，则剩下的唯一选择是拉伸图像，直到图像适合div大小。

这不好。很可能图像看起来非常糟糕。如果这是用于滑块或图像表示或符号目的，您宁愿使用实际适合div的图像或编辑图像，使其拉伸到div。这是正确的做法。

但是，有一些方法可以确保保持纵横比。这样做会使div的大小不同。

$(window).load(function() {
    $('.container').find('img').each(function() {
        var imgClass = (this.width / this.height > 1) ? 'wide' : 'tall';
        $(this).addClass(imgClass);
    })
})

.container {
    width: 40%;
    height: 40%;
    background: #444;
    margin: 0 auto;
}
.container img.wide {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}
.container img.tall {
    max-height: 100%;
    max-width: 100%;
    width: auto;
}

<div class="container">
 <img src="https://cdn.img42.com/3bb8d43ca012533b5ceb2ac691b7c953.png" />
</div>
<br />
<br />
<div class="container">
 <img src="https://cdn.img42.com/9bc6aad61f6967d1ec85a15dbfc462e0.png" />
</div>

在div中缩放两个图像以适合视口

1 个答案: