html - 在 CSS 中以 % vs vw 更改高度时图像消失

Question

我正忙于设计我的投资组合网站，并且我有一些图像希望能够正确缩放以适应浏览器或设备的大小。我一直在弄乱 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;
}

Answer 1

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，如果会很好地缩放，根据正文的字体大小；这样你的图像之间的“GAP”也会调整大小。