2 loveiflower loveiflower 于 2013.07.17 11:46 提问

safari浏览器100%适应高宽

有一个logo,我设置用媒体查询自动适应屏幕高宽。但是只有在safari浏览器中会出问题。

safari会让logo充满整个屏幕,改变原来的长宽比。

HTML代码:

<div id="logo"><a href="http://www.stilundso.de/"><img src="http://lorempixel.com/output/technics-h-c-200-206-2.jpg" width="200" height="206"></a></div>

CSS代码:

div#logo {background:#fff; width:200px; border-right:1px solid #FFF; height:206px; position:absolute; top:0; left:0; padding-top:41px;}

@media only screen and (max-width:206px) {
    div#logo {display:block; position:static; padding:0; border-right:none; width:auto; height:auto;}
    div#logo img {height:100%; width:100%;}
}

1个回答

Chengzi_963
Chengzi_963   2013.07.17 15:57
已采纳

使用height:auto; ,这样在safari中不会出现问题。

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!