我希望两个图像一起缩放并适合视口。
我试图制作一些最大宽度参数,但由于图像具有不同的宽度(相同的高度),因此它们的缩放比例不同。
这是我的代码:
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/
应该真的很容易,但我找不到合适的解决方案。
谢谢!
答案 0 :(得分:0)
如果您尝试将图像放入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>