调整图像大小以完美适合容器

Question

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

我已将容器的高度设置为 600 像素，但它甚至没有接近。我确定这是因为我的图像宽度只有 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>

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，然后专门增加它的高度。您也可以尝试使用引导程序，它对于将屏幕分成相等的部分非常有用。

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 -> display:table / .home-img-block --> display:table-cell) 但首先查看 ie11，因为它可能是很好。