次のコードを含む Web サイトを作成しています。
<style>
.browser_logo{
width:100%;
}
</style>
<img class="ie_logo browser_logo" src="images/clientimages/logo/logo.gif">
画像の幅は約 1000px と極端ですが、そうする必要があります。問題は、Safari で幅が 52px しかないことです。Chrome、Firefox、Opera、IE でも正しく表示されます。私は一晩中 Safari のハッキングを探していましたが、見つけたものはすべて Chrome ブラウザーの出力も変更します。幅 100% または基本的にスタイル部分を削除すると、サファリのように画像全体が表示されます。しかし、それはもはや反応しません。どんな助けでも大歓迎です。
上記のスタイル部分に以下を追加しました。それは機能しますが、それは醜いハックなので、適切に行う方法を知りたいです。
これが新しいコードです。http://www.websitedimensions.com/の画面サイズを使用しました
<style>
@media screen and (min-width:310px) {.browser_logo{min-width:310px;}}
@media screen and (min-width:468px) {.browser_logo{min-width:468px;}}
@media screen and (min-width:750px) {.browser_logo{min-width:750px;}}
@media screen and (min-width:989px) {.browser_logo{min-width:989px;}}
@media screen and (min-width:1010px) {.browser_logo{min-width:1010px;}}
@media screen and (min-width:1117px) {.browser_logo{min-width:1117px;}}
@media screen and (min-width:1245px) {.browser_logo{min-width:1245px;}}
@media screen and (min-width:1405px) {.browser_logo{min-width:1405px;}}
@media screen and (min-width:1645px) {.browser_logo{min-width:1645px;}}
@media screen and (min-width:1885px) {.browser_logo{min-width:1885px;}}
}
</style>
<img class="ie_logo browser_logo" src="images/clientimages/logo/logo.gif">