调整图像大小以完全适应容器
调整图像大小以完全适应容器
提问于 2016-01-21 12:11:28
我在这里搜索了这个问题，找到了几个例子，我特别尝试了一个，但它根本不像我想要的那样工作。
我已经将容器的高度设置为600px，但它甚至没有接近。我确信这是因为我的图片宽度只有33%，但有没有办法让这些图片更高，或者我只能坚持这么高？
我不明白为什么最右边的图像甚至不能到达容器的顶部。我至少希望是这样的。
有没有办法调整这些图像的高度，或者这会完全不成比例地拉它？
$(window).load(function(){
$('.home-img-block').find('img').each(function(){
var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
$(this).addClass(imgClass);
})
})#home-img-blocks {
width: 100%;
height: 600px;
}
/*#home-img-blocks-container {
border: 1px solid black;
}*/
.home-img-block {
width: 33%;
height: 100%;
border: 1px solid black;
display: inline-block;
}
.home-img-block img.wide {
max-width: 100%;
max-height: 100%;
max-width: 100%;
height: auto;
}
.home-img-block img.tall {
max-width: 100%;
max-height: 100%;
max-width: 100%;
width: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-blocks">
<div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test1.jpg"></div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test2.jpg">
</div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test3.jpg"></div>
</div>
Stack Overflow用户
发布于 2016-01-21 12:20:50
按照这种方式，你可以覆盖整个集装箱的高度。从镜像中移除max-width，并将vertical-align:top和overflow: hidden;交给容器。
但不是那样，它会剪切你的图像，因为它不会保持宽高比，因为高度太高，宽度太小。
$(window).load(function(){
$('.home-img-block').find('img').each(function(){
var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
$(this).addClass(imgClass);
})
})#home-img-blocks {
width: 100%;
height: 600px;
}
/*#home-img-blocks-container {
border: 1px solid black;
}*/
.home-img-block {
width: 33%;
height: 100%;
border: 1px solid black;
display: inline-block;
overflow: hidden;
vertical-align: top;
}
.home-img-block img.wide {
max-height: 100%;
}
.home-img-block img.tall {
max-width: 100%;
max-height: 100%;
max-width: 100%;
width: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-blocks">
<div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test1.jpg"></div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test2.jpg">
</div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test3.jpg"></div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34915282
复制相关文章
相似问题
腾讯云开发者
