我正在为我们公司的主要网站建立一个移动友好的网站.视网膜的设计方式大约是2x.我打算做的是将主要内容设置为最大宽度640px,宽度设置为100％.我有一定的背景图像很适合做到这一点.但是随着div的宽度变小,我需要调整高度.有任何想法吗？
这是css：
- *{margin:0;padding:0}h1,h2,h3,h4,h5,p,li,a,cite{font-size:14px;font-weight:normal}button,img{border:0}body{font-family:Arial,sans-serif;}
- body {
- margin:0;
- background-color:#fff;
- }
- .top,.body {
- max-width:640px;
- width:100%;
- margin:0 auto;
- }
- .top {
- background: white url(images/top.jpg) no-repeat;
- background-size:auto;
- overflow:hidden;
- height:124px;
- max-height:124px;
- }
- .top ul {
- list-style:none;
- height:100%;
- }
- .top ul li {
- height:100%;
- float:left;
- display:block;
- }
解决方法
我确实找到了一个答案.它增加了一点不客气的标记,但效果很好.
可以在这里找到： http://jsfiddle.net/AdQ3P/
可以在这里找到： http://jsfiddle.net/AdQ3P/
逻辑是在底部的底部.基本上这需要(img_height / img_width)* 100.
编辑这里的代码,所以不依赖于jsfiddle.
- <div class="container">
- <div class="hero"></div>
- </div>
- .container {
- width:100%;
- max-width:500px;
- }
- .hero {
- width:100%;
- height:0;
- background-size:100%;
- background:url(http://img97.imageshack.us/img97/3410/photo2ue.jpg) no-repeat;
- padding-bottom:75%;
- }
也是一个凌乱的桌子我有哈哈.
