有沒有辦法調整高度以匹配其他圖像的中點？

Question

我想弄清楚如何排列其他兩個圖像相遇的圖像中心點。

基本上我試圖做什麼發生在這張照片。

https://d13yacurqjgara.cloudfront.net/users/488816/screenshots/1726057/1_1x.jpg

我怎樣才能做到這一點與CSS？

Answer 1

有幾種方法可以做到這一點，但您需要反過來思考這個問題。換句話說，您需要調整頂部圖像的中點位置，使其與上方圖像的底部對齊。

DEMO

假設你有一個包含分區兩個圖像，你知道在上面的小圖像的大小，你可以絕對定位較小的圖像和更小的圖像的底部屬性設置爲只有一個半它的身高：

HTML：

<div class="image-group"> 
    <img src="http://placehold.it/800x300/e8117f/fff&text=Big%20Image" alt="Big Image" class="big-image" /> 
    <img src="http://placehold.it/300/9acd32/fff&text=Small%20Image" alt="Small Image" class="small-image" /> 
</div> 

CSS：

.image-group { 
    position: relative; 
} 
.big-image { 
    display: block; 
    width: 100%; 
} 
.small-image { 
    height: 250px; 
    position: absolute; 
    bottom: -125px; /*half the height of itself*/ 
    left: 0; 
    right: 0; 
    display: block; 
    margin: auto; 
} 

解決此問題的另一種方法是，您可以使用變換。這裏的優點是你不需要知道圖像的高度。一個潛在的缺點是IE8或Opera-Mini不支持transform屬性（如果你關心這些瀏覽器）。此外，轉換仍然需要前綴在許多瀏覽器上工作。這個例子使用了和上面完全一樣的html。除了設置圖像的高度和計算底部屬性高度的一半之外，您只需將底部屬性設置爲0，然後使用transform屬性將圖像沿y軸移動50％即可。因此，變換會自動考慮圖像的高度。

DEMO #2

CSS：

.image-group { 
    position: relative; 
} 
.big-image { 
    display: block; 
    width: 100%; 
} 
.small-image { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    display: block; 
    margin: auto; 
    -webkit-transform: translate(0, 50%); 
    -ms-transform: translate(0, 50%); 
    transform: translate(0, 50%); 
}