我是经验丰富的网页设计师,所以我对这门艺术了解不多。
我水平放置了三个元素(左/中/右),它们具有固定大小:
.banner-box {
position: relative;
display: inline-block;
width: 300px;
height: 400px;
margin: 0 auto;
}
并且在每个 div 中都有很少的图像,它们水平居中,img 的一般样式是:
img {
max-width: 100%;
}
使它们流动起来。
但由于 div 不灵活,因此在调整浏览器窗口大小时,其中的图像也不会改变其大小。
是否可以在任何 html 元素上设置固定大小并仍然以某种方式使其流畅? 我知道我可以使用百分比而不是像素,但我也遇到了使用百分比为 .banner-box 设置适当高度的问题 - 框不会拉伸(stretch)到所需的 400 像素,只能拉伸(stretch)到 281 像素。
这是 html:
<div id="footer">
<img src="footer-line.png" alt="Footer.png" />
<p><span>some span</span> blah</p>
<p>mail: <span>mail@domain.com</span></p>
</div>
还有我的简单网页的整个 CSS:
html {
background: url('mu-media-background-1920.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100% 100%;
}
img {
max-width: 100%;
}
#container {
width: 1200px;
margin: 5% auto;
text-align: center;
}
#header {
display: block;
clear: both;
position: relative;
width: 100%;
margin: 0 auto;
}
#content {
display: block;
width: 95%;
height: auto;
margin: 10% auto 5% auto;
}
.banner-box {
position: relative;
display: inline-block;
width: 300px;
height: 400px;
margin: 0 auto;
}
.banner-text {
position: relative;
display: block;
top: 7%;
margin: 0 auto;
}
.see-more-button {
position: absolute;
display: block;
margin: 0 auto;
left: 0; right: 0; bottom: 0;
}
#virtual-studio {
float: left;
}
#mu-animation {
float: right;
}
#shadows {
display: block;
clear: both;
position: relative;
width: 100%;
}
#shadows img {
display: block;
clear: both;
position: relative;
margin: 0 auto;
}
#footer {
display: block;
clear: both;
width: 95%;
margin: 0 auto;
font: 15px Arial, Helvetica, sans-serif;
}
#footer p {
display: table;
clear: both;
position: relative;
margin: 0 auto;
color: #AFBEA5;
text-align: center;
width: auto;
}
#footer span {
font-weight: bold;
color: #BDC9AF;
}
我正在准备响应式布局,所以最好(据我所知)只使用百分比。
最佳答案
这是一个很好的混合方法,过去对我很有效。
正如您已经提到的,您可以使用百分比宽度来构建流畅的布局,然后使用最大值和最小值限制/修复特定的 div 大小。例如:
#container {
width: 100%;
max-width: 1200px;
}
这是一个工作示例,横幅框限制为最大 300 像素宽度和最小 400 像素高度(我添加了一些填充和边框,以便您可以看到发生了什么):jsfiddle
最后您仍然需要调整您的响应式媒体查询来处理您的固定元素,但这样您只需更改几个最小值和最大值。
关于css - 使固定大小的 <div> 在流体布局中可缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21311488/