页面中央有一个框，将以幻灯片形式显示。我想根据用户的屏幕来增加其尺寸。并设置最小尺寸，因此当屏幕很小但我的盒子不会更小时。这是我的代码：
.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>
我想我必须使用min-height / width，但是我的实际宽度和高度应该以百分比为单位吗？它在px中不起作用。因此，通常来说，我正在寻找用于此问题的标准解决方案。
使用百分比代替固定值：
.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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句