調整圖像的大小以適應容器的完美

Question

我在這裏搜索了這個問題，並找到了幾個例子，我特別嘗試了一個例子，但它並不像我想要的那樣工作。

我已經將容器的高度設置爲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 { 
 
\t width: 100%; 
 
\t height: 600px; 
 
} 
 
/*#home-img-blocks-container { 
 
\t border: 1px solid black; 
 
}*/ 
 
.home-img-block { 
 
\t width: 33%; 
 
\t height: 100%; 
 
\t border: 1px solid black; 
 
\t display: inline-block; 
 
} 
 
.home-img-block img.wide { 
 
\t max-width: 100%; 
 
    max-height: 100%; 
 
\t max-width: 100%; 
 
\t height: auto; 
 
} 
 
.home-img-block img.tall { 
 
\t max-width: 100%; 
 
    max-height: 100%; 
 
\t max-width: 100%; 
 
\t width: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="home-img-blocks"> 
 
\t <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 { 
 
\t width: 100%; 
 
\t height: 600px; 
 
} 
 
/*#home-img-blocks-container { 
 
\t border: 1px solid black; 
 
}*/ 
 
.home-img-block { 
 
\t width: 33%; 
 
\t height: 100%; 
 
\t border: 1px solid black; 
 
\t display: inline-block; 
 
    overflow: hidden; 
 
    vertical-align: top; 
 
} 
 
.home-img-block img.wide { 
 
\t 
 
    max-height: 100%; 
 
\t 
 
} 
 
.home-img-block img.tall { 
 
\t max-width: 100%; 
 
    max-height: 100%; 
 
\t max-width: 100%; 
 
\t width: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="home-img-blocks"> 
 
\t <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

嗯，你已經設置你的身高爲auto圖片，所以如果你的最右邊的圖片有不同的原始大小比其他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如果需要的話（＃家庭IMG塊 - >顯示：表/ .home-img-block - > display：table-cell），但首先查看ie11，即可可能會很好。