可變高度的3片擴大圖像

我試圖用3幅圖像創建一個響應圖形。一個左帽，一個右帽和一個擴展填充的中間片。起初看起來很簡單，但事實證明很困難。這是我的html。可變高度的3片擴大圖像

<div class="wrapper"> 
    <div class="left"> 
     <img src="leftcap.png"/> 
    </div> 
    <div class="middle"> 
     <img src="middlepiece.png"/> 
    </div> 
    <div class="right"> 
     <img src="rightcap.png"/> 
    </div> 
</div>

和我的CSS ...

.wrapper{ 
    height:30%; 
    width:100%; 
    display:flex; 
} 

.middle{ 
    flex-grow:1; 
}

我想左側蓋只有一樣寬，它需要依據了我的圖像的大小和它的30％的高度的父，按比例縮放並右對齊。

我想要正確的帽子只需要根據我的圖像的大小和其父母的30％高度，根據比例縮放和左對齊來確定。

最後，我希望中間的圖像伸展以填充任何剩餘寬度以及其父級的30％高度。

就像我說過的，我認爲這會很簡單，但我還沒有想出任何偉大的想法。我試過flexbox和表格。如果你正在尋找一些上下文，這裏是我使用表格的例子。圖像不尊重父母的高度或寬度。任何想法將不勝感激。

http://codepen.io/asellenrick/pen/qdrrZw

來源

2015-06-03 Andrew Sellenrick

css3可以在一個div中繪製它：http://codepen.io/gc-nomade/pen/WvpZyW。如果你想使用你的圖片，你可以使用多個背景和背景大小。但它會拉伸圖像 –

.c img { 
    height: 30%; 
    width: 100%; 
    max-width: 100%; 
} 
.c{ 
    width: auto; 
} 
.c:nth-child(2){ 
    width:100%; 
    width: Calc(100% - 426px); 
}

應該這樣做。

來源

2015-06-03 12:41:39

可變高度的3片擴大圖像

回答

相關問題