將具有不同尺寸的並排圖像動態調整到相同高度

Question

我在一個塊級容器中並排放置了兩個圖像，這些容器具有任意不同的尺寸（例如，它們可以是任意兩個圖像），我想動態調整寬度，使兩個圖像的整體高度為相同。 我不認為這可以在CSS中完成我所見過的所有內容（雖然可能使用flexbox模型，但我不太了解它）所以我可能需要一個JavaScript解決方案，但我來的是由於不知道邊界框的整體高度，或者調整圖像的高度影響邊界框的高度這意味着它不斷地重新調整自身，因此失敗了。

這是任意圖像高度的示例： https ： //jsfiddle.net/c6h466xf/

這就是我想要實現的目標（盡管顯然沒有對寬度進行硬編碼，我希望動態解決這些問題）： https ： //jsfiddle.net/c6h466xf/4/

這是我開始的（鏈接到JSFiddle需要代碼）：

CSS

div.container {
    width: 100%;
}

 div.container img {
    width: 49%;
 }

HTML

<div class="container">
    <img src="http://i.imgur.com/g0XwGQp.jpg">
    <img src="http://i.imgur.com/sFNj4bs.jpg">
</div>

編輯：我不想在容器元素上設置靜態高度，因為這會阻止它響應整個頁面的寬度，以便圖像動態地相互調整大小並響應頁面的寬度，所以無論觀看設備如何，它們的總組合寬度總是（例如）頁面寬度的80％。

Answer 1

你可以按高度設置它。 給你的容器div一個固定的高度。

這是一個適合您的解決方案：

div.container {
    height:200px;
}

div.container img {
    height: 100%;
}

的jsfiddle

您還有2個其他選項可將所有圖像調到相同高度：

你可以放置一個overflow:hidden在容器div

要么

將圖像剪裁為相同大小： http ： //www.w3schools.com/cssref/pr_pos_clip.asp

Answer 2

如果它有響應，請使用百分比高度和寬度：

 html { height: 100%; width: 100%; } body { height: 100%; width: 100%; margin: 0; padding: 0; } div.container { width: 100%; height: 100%; white-space: nowrap; } div.container img { max-height: 100%; } 

 <div class="container"> <img src="http://i.imgur.com/g0XwGQp.jpg" /> <img src="http://i.imgur.com/sFNj4bs.jpg" /> </div> 

Answer 3

為您的圖片設置一個類：

<img src="http://i.imgur.com/g0XwGQp.jpg" class="example" >
<img src="http://i.imgur.com/sFNj4bs.jpg" class="example" >

然后你需要設置容器的高度：

div.container {
    height:200px;
}

在您的JavaScript中：

var yourImg = document.getElementsByClassName("example");
if(yourImg && yourImg.style) {
    yourImg.style.height = '100%';
    yourImg.style.float = 'left';
}

Answer 4

這應該是一個簡單的代碼，請檢查以下內容：

HTML代碼：

<table class="Table">
    <tr>
        <td><img src="images/1.jpg"/></td>
        <td><img src="images/2.jpg"/></td>
        <td><img src="images/3.jpg"/></td>
        <td><img src="images/4.jpg"/></td>
    </tr>
</table>

CSS：

table { width: 100%; }
table img {
   max-width: 100%; max-height: 100%; padding-left: 5px; border: none;
}