css比例頂部圖像水平和垂直，但底部圖像只有寬度

我目前有一種模式，我想用作覆蓋網頁。css比例頂部圖像水平和垂直，但底部圖像只有寬度

HTML：

<div id="myModal" class="modal"> 
    <span class="close cursor" onclick="closeModal()">&times;</span>   
     <div class="imgCon"> 
     <img class="overlayimg" src="img/trendoverlay.png" /> 
     <img class="overlayimg" src="img/trendtimeline.png" style="display: block"/> 
     </div>   
    </div>

CSS：

*{ 
    box-sizing: border-box; 
} 

body{ 
    width:100%; 
} 

.imgCon{ 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    padding: 0 51.5px 73px; 
    text-align: center; 
} 

.overlayimg{ 
    max-width:100%; 
    max-height: 100%; 
    height:auto; 
}

但是這裏的問題。第一張圖片（上面一張）只有圖片時。這是完美的。它工作正常。

下面的圖像必須與其他圖像保持在相同的DIV內，與上面的圖像一樣寬。但高度是固定的。有沒有辦法實現這一點，所以他們仍然可以在底部填充51.5px左右和73px的填充？

畫面與更多的信息： Example

小提琴： https://jsfiddle.net/4n1quv9n/1/#&togetherjs=sT7KVDhPT8

正如你可以看到上面的圖片尺度如何我希望它擴展。它保持縱橫比，但有最小的左/右和底部。假設下面的圖像與頂部圖像具有相同的寬度。但高度必須固定在110px。但是包含圖像的Div必須保持邊緣和底部的最小值2。

這是怎麼了？： https://imgur.com/a/ILPpO

這裏底部圖像還必須爲大規模的頂級圖像。而實際上他們也需要粘在一起，因此看起來像1張圖片而不是2張獨立的圖片。

來源

2017-07-26 Toofle

，您可以附加的什麼是錯的 – onetwo12

是的，很難圖片來了解你想要達到此 – FabulousCo

做一個小提琴什麼，或者codepen – AmitJS94

你可以給一個嘗試display:table特性在中間畫一個單元格放置和調整第一形象，absolute positionning爲第二圖像：

#modal { 
 
    display: table; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    padding-bottom: 73px;/* bottom limits */ 
 
    box-sizing: border-box; 
 
} 
 

 
#modal:before, 
 
#modal:after { 
 
    content: ''; 
 
    padding-left: 51px;/* sides limits ... pixel cannot be cut in hlves */ 
 
    display: table-cell; 
 
} 
 

 
.modchild { 
 
    display: table-cell; 
 
    position: relative; 
 
    margin-bottom: 100px;/* room for img 2 */ 
 
    width: 1%; /* will expand to fit image width and will stand at middle */ 
 
} 
 

 
img[src*="x212"] { 
 
    height: 100vh;/* size it */ 
 
    max-height: calc(100vh - 100px - 73px);/* downsize to use */ 
 
    display: block;/* or reset vertical-align*/ 
 
} 
 

 
img[src*="x100"] {/* size and stretch it */ 
 
    margin: 0; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    height: 100px; 
 
    bottom: 0; 
 
} 
 
* {margin:0;}

<div id=modal> 
 
    <div class=modchild> 
 
    <img src="http://dummyimage.com/400x212&text=keep_ration" /> 
 
    <img src="http://dummyimage.com/400x100/ff0&text=distort" /> 
 
    </div> 
 
</div>

小提琴例如：https://jsfiddle.net/4n1quv9n/4/

來源

2017-07-26 11:51:29

我喜歡在Y軸上調整大小時的工作方式。但是在X軸上，如果調整大小，它會變寬。我需要圖像的高寬比保持不變。 – Toofle

@ Toofle第一張圖片確實保持比例，第二張圖片顯然不會。其他引導如果裁剪圖像不是麻煩，對象適合可以做保留比例但切斷圖像的部分（切斷的邊可以從css中選擇） –

現在它幾乎可以工作。但是，當我使它「高大但寬度很小」時，它會得到一個水平滾動條。這裏也可以縮放。就像在我的例子中灰色塊一樣。這可能嗎？ – Toofle

This is a Try

CSS

body{ 
    position: relative; 
} 
.wrapper{ 
    position: relative; 
} 
div.image-container{ 
    position: absolute; 
    margin:auto; 
    height: 100%; 
    max-width: 100%; 
    padding: 0 51.5px 73px; 
    text-align: center; 
} 

img{ 
    max-width:100%; 
}

HTML

<body> 
<div class="wrapper"> 
    <div class="image-container"> 
     <img src="http://imgur.com/c7uASdV.png"> 
     <img src="http://imgur.com/60d6BUt.png" style="height: 110px"> 
    </div> 
    </div> 
</body>

Link for reference

來源

2017-07-26 11:56:39

我可以問你爲什麼使用職位？它接縫就像沒有工作。 – Fantasterei

當我將屏幕更改爲最小高度的寬窗口時。它會得到一個滾動條，並且圖像不會使用底部的73px填充來調整大小。 :( – Toofle

css比例頂部圖像水平和垂直，但底部圖像只有寬度

回答

相關問題