Question

页面中央有一个框，将显示为幻灯片。我想根据用户的屏幕增加其大小。并且还设置了最小尺寸，因此当屏幕太小但我的盒子不会更小时。这是我的代码：

    .container{ 
    width:1000px;
    height:500px; 
    position:absolute;
    left:50%;
    top:50%;
    margin:-275px 0 0 -500px;
}
.main-content{
    float:left;
    width:1000px;
    height:500px; 
    position:absolute;
    background:url(../img/map.png) no-repeat center top;
    border: rgba(255,255,255,0.2) solid 1px;
}

HTML

<div class="container">
            <div class="main-content">hi</div> 
</div>

我想我必须使用最小高度/宽度，但我的实际宽度和高度应该是百分比吗？它在px中没有用。所以我一般都在寻找这个问题的标准解决方案。

Answer 1

使用百分比而不是固定值：

.main-content{
    float:left;
    width: 80%; /* Use the percentage that fits to your needs */
    height: 80%;
    min-height: 300px; /* You can also define minimum width and height */
    min-width: 300px;
    position:absolute;
    background:url(../img/map.png) no-repeat center top;
    border: rgba(255,255,255,0.2) solid 1px;
}

如何根据屏幕改变高度和宽度，（最小）

1 个答案: