调整图像大小以完全适应容器
调整图像大小以完全适应容器
提问于 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>
回答 4
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用户
发布于 2016-01-21 12:27:11
好吧，你已经将你的高度设置为自动，所以如果你最右边的图片的原始尺寸与其他两张不同，这可能是个问题。您可以尝试为最后一张图片添加id，然后专门增加它的高度。你也可以尝试使用bootstrap，它对于将你的屏幕等分成几部分非常有用。
Stack Overflow用户
发布于 2016-01-21 13:49:46
#home-img-blocks {
font-size: 0;
height: 600px;
width: 100%;
}
/*#home-img-blocks-container {
border: 1px solid black;
}*/
.home-img-block {
border: 1px solid black;
box-sizing: border-box;
display: inline-block;
height: 100%;
overflow: hidden;
position: relative;
width: 33.33%;
}
.home-img-block img.wide {
height: 100%;
margin-left: -20%;
width: auto;
}
.home-img-block img.tall {
height: 100%;
margin-left: -50%;
}
<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
复制相关文章
相似问题
腾讯云开发者
