當在CSS中更改高度vs vw時圖像消失

Im正在忙於設計我的作品集網站，並且我有一些圖像可以正確縮放到瀏覽器或設備的大小。我一直在與vw搞混，似乎很好地解決了這個問題。然而，由於作爲一名學生，我正在考慮確保代碼穩定，因此不會受到不同瀏覽器或設備的影響。當在CSS中更改高度vs vw時圖像消失

所以這裏的主要問題是當我在一幅圖像上使用％來調整高度時，圖像完全消失。我只能使用px或vw使它出現在正確的位置，並試圖找出原因？（請注意，我只需要調整高度，ID希望能夠使用％，否則我比例縮小到更小的設備和瀏覽器的時候結束了一個巨大的缺口）

這裏是我的CSS：

/*----------------------------Top ----------------------------*/ 
.topwrap{ 
    position:relative; 
    top:50px; 
} 
.face{ 
    position:relative; 
    float:right; 
    background:url(../images/face2.png) no-repeat; 
    background-size:100%; 
    top:10%; 
    width:50%; 
    height:15vw; 
    right:16%; 
    min-width:160px; 
} 
.txtwrap{ 
    position:absolute; 
    margin-top:1.3%; 
    font-size:1.3vw; 
    float:right;     
    right:39%; 
    text-align: center; 
} 
.sptxt{ 
    color:#171717; 
    font-weight:bold; 
} 
.sptxt2{  
    color:#171717; 
    font-weight:400; 
} 
/*----------------------------Lower----------------------------*/ 
.lowerwrap{ 
    position:relative; 
    float:left; 
    height:100%; 
    width:100%; 
    top:50px; 
    padding-top:10px; 
    box-shadow: 0px 10px #333 inset;  
} 
.contentwrap{ 
    position:relative; 
    width:100%; 
    height:15vw; 
    background:url(../images/content.png) no-repeat; 
    background-size:100%; 
    display: block; 
    z-index:1; 
}

來源

2015-07-03 factordog

你有沒有考慮過flex？你可以整齊地對齊它。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/你可能對align-items感興趣：stretch –

，這似乎已經成功了。有什麼具體的方法可以使用它嗎？ – factordog

你會發現它有用的時候，以及其他時候可能很麻煩的時候。我根據每個項目來判斷。對不起，我無法回答，因爲答案總是變化。我只是想讓你知道你可以選擇的選項，所以你可以決定。 –

body{ font-size: 16px } 
@media screen and (max-width: XXXpx) {body { font-size: 12px } } 
@media screen and (max-width: XXXpx) {body { font-size: 8px } }

爲您的代碼的其餘部分，如填充，保證金可以用EM/REM，如果將很好地擴展，根據身體的字體大小;這樣，圖像之間的「間隙」也將調整大小。

來源

2015-07-03 15:36:20 aahhaa

當在CSS中更改高度vs vw時圖像消失

回答

相關問題