- ベストアンサー
IE8で画像がぺちゃんこに潰れる問題の解決方法は?
- HTML言語で画像を貼り付ける際、横幅のみ指定しても縦は自動調整されると思っていましたが、IE8で画像がぺちゃんこに潰れる問題が発生しました。
- Google ChromeやSafariでは正常に表示されるのに、IE8では高さが0になってしまいます。
- IE8でも画像を正常に表示させる方法はありますか?
- みんなの回答 (3)
- 専門家の回答
質問者が選んだベストアンサー
「IE8でも正常に画像が見れるようにするにはどうしたらいいでしょうか?」 縦幅を指定しないなら、「height=""」の記述を消せば、正しく表示されます。 IE8では、「height=""」と記載されていると、数値が分からないので、勝手に「height=1」として、処理するようです。 (ホームページのソースは、「height=""」でしたが、保存すると「height=1」になっていました。それを削除すると、ローカルではIE8で正しく写真が表示されることを確認できましたので。)
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
height:autoが有効なわけは、とstyle属性にheightというプロパティが出てきた時点で詳細度100として、属性値0の属性heightを上書きするからです。 style属性内のwidth,heightいずれかに、autoを記載すると、heightなりwidthにどんな値が入っていても上書きされます。 これはとても便利で、後方互換のため、img要素に、width="240" height="120"と書かれていても、外部スタイルシートでwidth:120;height:autoとすると、詳細度が最低でも1なので、上書きされる。セレクタの書き方で詳細度は変わります。 もちろん、 <img src="img/desorate1.jpg" width="64" height="48" border="0" style="float:left;margin:4px 14px 4px 6px;border-style:groove;border-width:10px;width:640px;height:auto"> は、スタイルシートを読み取れない携帯電話では64と48で表示されるが、パソコンでは640pxと480pxで表示とか。
お礼
この様なやり方もあったんですね。 ご指摘の方法を試してみると正常に表示されました。 詳細なご説明ありがとうございます!
- ORUKA1951
- ベストアンサー率45% (5062/11036)
style="float:left;margin:4px 14px 4px 6px;border-style:groove;border-width:10px;height:auto;" で良いと思うけど???
お礼
ご指摘の通りに修正し、IE8で正常に表示されました。 ローカルにまで保存して確かめていただいてありがとうございました!