2

Safari を除く (ほぼ) すべてのブラウザーで正常に動作するメディア クエリを使用して、全幅と相対的な高さにサイズ変更したいロゴがあります。

Safari は、縦横比を維持するのではなく、画面全体に画像をレンダリングします。

私の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%;}
}

ここにフィドルがあります。

どんな助けでも感謝します。

アップデート：

現在は Safari で動作しますが、iPhone 3G の Safari では動作しません。何か案は？

4

1 に答える 1

2

代わりに使用してくださいheight:auto;。これは同様に機能し、Safari ではこの問題を引き起こしません。

于 2013-07-16T11:21:34.083 に答える