调整图像大小以完美地放入容器中

Question

我在这里搜索了这个问题并找到了几个例子，我特别尝试了一个例子，但它根本不像我想要的那样工作。

我已将容器的高度设置为600px，甚至没有接近。我确信这是因为我的图像宽度只有33％，但是有没有办法让这些高一点，还是我只是高度这么高？

我不明白为什么最右边的图像甚至没有到达容器的顶部。我至少希望那样。

无论如何要调整这些图像的高度还是完全不成比例？

self.init

$(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;
}

Answer 1

以下方式可以覆盖容器的整个高度。从图片中移除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>

Answer 2

嗯，你已经为照片设置了自动高度，所以如果最右边的照片原始大小不同于其他2可能是问题。你可以尝试为最后一张图片添加一个id，而不是特意增加它的高度。您也可以尝试使用bootstrap，这对于将屏幕划分为相同的部分非常有用。

Answer 3

#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>

您可以尝试上面的代码，它将完美地适用于所有普通桌面屏幕。

Answer 4

HTML

<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>

CSS

#home-img-blocks {
  display:flex;
  flex-direction:center;
  /* flex-wrap:wrap; */ /* turn this on if you want the images to wrap on smaller browsers */
  width:auto; /* calculates to 1156px wide */
    height: 600px;
}

.home-img-block {
    flex:0 0 896px; /* round down of narrowest image at 600px height */
  overflow:hidden;
    border: 1px solid black;
}

.home-img-block img {
    max-height:100%;
}

JS

不需要

http://codepen.io/anon/pen/WrdELK

文档

https://developer.mozilla.org/en-US/docs/Web/CSS/flex

支持

http://caniuse.com/#search=flex

如果需要，为ie11专门做额外的代码（＃home-img-blocks - ＆gt; display：table / .home-img-block - ＆gt; display：table-cell）但是首先查看ie11，因为它可能没问题。