定义div的高度以进行缩放

Question

有没有办法在没有固定到定义尺寸的情况下定义div的高度？例如，将div设置为200px，它将被锁定，因此当它缩放时，它不会改变。

我知道你可以使用％但是当我尝试这样做时我的图像消失了所以我被迫使用像px或vw这样的单位，我不知道如何创建流畅的设计而不被锁定到特定的设置大小。

这是我的代码。我想要.face背景图像出现但是使用％它无论我做多大，它都不会显示图像。如果我在其容器中添加px或vw编号.topwrap然后它会创建一个与div容器.lowerwrap的大间隙。所以基本上我正试图找到一种方法来让图像以正确大小的div显示，并且能够扩展到浏览器大小。

的

的

/*----------------------------Top ----------------------------*/
.topwrap{
    position:relative;
    top:50px;
    height:auto;
}
.face{  
    position:relative;
    float:right;
    background:url(../images/face2.png) no-repeat;
    background-size:100%;
    top:10%;
    width:50%;
    height:200%;
    display: flex;
    right:16%;
    display: block;
    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;
    width:100%;
    height:300px;
    top:50px;
    padding-top:10px;
    display: flex;
    box-shadow: 0px 10px #333 inset;    
}
.contentwrap{
    position:relative;  
    width:100%;
    background:url(../images/content.png) no-repeat;
    background-size:100%;
    display: block;
    z-index:1;
}
/*----------------------------Footer----------------------------*/
.footerwrap{
    position:relative;
    float:left;
    width:100%;
    background:#09C;
    top:50px;
    text-align:center;  
}
.foottxt{
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size:0.5vw;
    color:#FFFFFF;
    font-weight:200;
    z-index:300;
}

Answer 1

由于我们无法看到您要应用样式的HTML，因此很难提供解决方案。您是否尝试在.face类中使用以下内容？

min-height: 200px;

Answer 2

如果您希望允许<div class="face">元素根据该百分比宽度进行流量调整，但保持给定的宽高比，请尝试将.face规则集替换为：

.face {
    position:relative;
    float:right;
    background:url(../images/face2.png) no-repeat;
    background-size:100%;
    top:10%;
    width:50%;
    right:16%;
    display: block;
    min-width:160px;
}
.face:before {
    display: block;
    content: '';
    padding-top: 100%;
}

上面的代码假设face2.png的高度和宽度相同（方形图像，或1：1的宽高比）。要使div.face适合您的实际图像，请将图像的高度除以宽度（以像素为单位），再乘以100％，并将其用于.face:before的{​​{1}}值。例如，如果face2.png高180像素，宽120像素，请使用padding-top。

请参阅：http://www.goldenapplewebdesign.com/responsive-aspect-ratios-with-pure-css/