我正在尋找一種解決方案，讓兩張圖片并排放置，填充資源管理器視窗的整個寬度。這兩張照片有不同的格式（肖像和風景）。同一行中的兩張照片應該都具有相同的高度。例如，如示例照片中所示，但不得像此處所示那樣扭曲。有沒有辦法像這樣得到它？
uj5u.com熱心網友回復：
圖片顯示如下：
<a><img src="leftpicture.jpg" alt="">
</a>
<a><img src="rightpicture.jpg" alt="">
</a>
uj5u.com熱心網友回復：
The HTML:
`<div class="row">
<div class="column">
<img src="image.png" style="width:100%">
</div>
<div class="column">
<img src="image.png" style="width:100%">
</div>
</div>`
The css:
`<style>
.row {
display: flex;
}
.column {
flex: 50%;
padding: 5px;
}
</style>
`
uj5u.com熱心網友回復：
現在它們的寬度相同，但高度不同。為什么？？？這是我使用的代碼：
html:
<div class="row">
<div class="column">
<a href="Ananasfrucht (1g).JPG" data-lightbox="1-Ananas" data-title="nach ca. 3 Jahren ist der Fruchtansatz erkennbar (nach 1 Woche)">
<img src="Ananasfrucht (1g).JPG" alt="Ananasfrucht" style="width: 100%">
</a>
</div>
<div class="column">
<a href="Ananasfrucht (2g).JPG" data-lightbox="1-Ananas" data-title="nach ca. 3 Jahren ist der Fruchtansatz erkennbar (nach 1 Woche)">
<img src="Ananasfrucht (2g).JPG" alt="Ananasfrucht" style="width: 100%">
</a>
</div>
</div>
CSS：
.row {
display: flex;
}
.column {
flex: 50%;
padding: 5px;
}
uj5u.com熱心網友回復：
我可以想到兩種方法來做到這一點。
首先是創建一個<div>, 并在其中放置兩個<img>標簽，然后相應地自定義影像的大小。請參閱此 CodePen。（我在谷歌上隨便找了一張照片。）
第二種方法是創建兩個 div [在父容器下] 并將所需的影像設定為它們的背景影像。請參閱其他 CodePen。
我個人更喜歡使用影像標簽，以便我可以根據需要快速調整影像大小。在我看來，必須調整大小并避免重復 div 的背景影像會有些壓力，但這當然取決于您要在網站上實作的目標。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/455794.html
下一篇：添加影像后，檢查按鈕不可點擊