兩個圖像在同一行，並具有相同的高度CSS

我有兩個圖像在同一行，但我希望這些圖像也有相同的高度。兩個圖像在同一行，並具有相同的高度CSS

現在這是我的代碼：

HTML：

<div> 
<div class="img1"> 
    <img src="http://www.immobiliaredelcentromodena.com/wp-content/uploads/2017/02/esterno-agenzia.jpg"> 
</div> 
<div class="img2"> 
    <img src="http://www.immobiliaredelcentromodena.com/wp-content/uploads/2017/02/interno-agenzia.jpg"> 
</div> 
<div>

CSS：

.img1 { 
    float:left; 
    width:30%; 
} 

.img2 { 
    float:right; 
    width:60%; 
}

我試圖用max-height屬性，而不寬，但它不工作。

這就是我想要的東西：

來源

2017-02-06 Matteo

如果圖像正確砍你可以只設置這些的HIGHT。 –

它看起來像你的圖像將很好地相互調整，因此您可以輕鬆地與display:flex實現自己的佈局：

.wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
    width: 100%; 
 
} 
 
.wrapper > div:first-child { 
 
    margin-right: 15px; 
 
} 
 
.wrapper img { 
 
    display: block; 
 
    max-width: 100%; 
 
}

<div class="wrapper"> 
 
    <div class="img1"> 
 
    <img src="http://www.immobiliaredelcentromodena.com/wp-content/uploads/2017/02/esterno-agenzia.jpg"> 
 
    </div> 
 
    <div class="img2"> 
 
    <img src="http://www.immobiliaredelcentromodena.com/wp-content/uploads/2017/02/interno-agenzia.jpg"> 
 
    </div> 
 
    <div>

如果使用片段中的完整頁面鏈接，您可以在頁面調整大小時看到，圖片大小調整。

如果您的圖像在不同的高度出發，那麼你可以期待的最好是類似以下，但你會看到會有裁剪，圖像不居中

.wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
    width: 100%; 
 
} 
 
.wrapper div { 
 
    overflow: hidden; 
 
} 
 
.wrapper img { 
 
    display: block; 
 
    width: auto; 
 
    height: 100%; 
 
}

<div class="wrapper"> 
 
    <div class="img1"> 
 
    <img src="http://lorempixel.com/200/600/sports/1/"> 
 
    </div> 
 
    <div class="img2"> 
 
    <img src="http://lorempixel.com/800/400/sports/2/"> 
 
    </div> 
 
    <div>

來源

2017-02-06 14:10:31 Pete

我不得不刪除寬度，但現在工作得很好，謝謝 – Matteo

不客氣，很高興它幫助:) – Pete

可以使用height property在CSS定義的元素高度。

嘗試：

.img1 { 
    float:left; 
    width:30%; 
    height:100px; 
} 

.img2 { 
    float:right; 
    width:60%; 
    height:100px; 
}

來源

2017-02-06 14:05:30

這是真的，但如果在Photoshop中未正確裁剪，img上的寬度和高度可能會使其變形。 –

非常不正確 - 您可以在圖像上使用物體貼合屬性以確保正確裁剪。瀏覽器支持不盡 –

是的，但瀏覽器的支持不適合對象適合（尤其是ie和邊緣）。 –

如何財產以後這樣的：

https://jsfiddle.net/6n5oqamk/1/

使用背景圖片的CSS元素

CSS：

.img1 { 
    float:left; 
    width:30%; 
    height: 750px; 
    padding-right: 50px; 
    background-image: url('http://www.immobiliaredelcentromodena.com/wp-content/uploads/2017/02/esterno-agenzia.jpg'); 
} 

.img2 { 
    float:right; 
    width:60%; 
    height: 750px; 
    background-image: url('http://www.immobiliaredelcentromodena.com/wp-content/uploads/2017/02/interno-agenzia.jpg'); 
}

HTML：

<div> 
    <div class="img1"></div> 
    <div class="img2"></div> 
<div>

來源

2017-02-06 14:11:12

最大高度是指圖片不需額外去了這個高度，但他們也won'如果他們不需要它，就使用它。

你需要的是正常的身高。

您的問題可能會被裁剪或變形。

兩種可能的方式：

object-fit:cover - not working for IE/Edge

或切換到背景圖像使其

background-size:cover

來源

2017-02-06 14:11:39

你應該爲背景添加圖像：

的jsfiddle：jsfiddle.net/s6gje0cd

.imgs-container { 
 
    height: 500px; 
 
} 
 

 
.img1 { 
 
    float: left; 
 
    width: 30%; 
 
    height: 100%; 
 
    background-image: url("http://www.immobiliaredelcentromodena.com/wp-content/uploads/2017/02/esterno-agenzia.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 

 
.img2 { 
 
    float: right; 
 
    width: 60%; 
 
    height: 100%; 
 
    background-image: url("http://www.immobiliaredelcentromodena.com/wp-content/uploads/2017/02/interno-agenzia.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
}

<div class="imgs-container"> 
 
    <div class="img1"> 
 
    <!--<img src="http://www.immobiliaredelcentromodena.com/wp-content/uploads/2017/02/esterno-agenzia.jpg">--> 
 
    </div> 
 
    <div class="img2"> 
 
    <!--<img src="http://www.immobiliaredelcentromodena.com/wp-content/uploads/2017/02/interno-agenzia.jpg">--> 
 
    </div> 
 
    <div>

來源

2017-02-06 14:22:31 pol

兩個圖像在同一行，並具有相同的高度CSS

回答

相關問題