こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

float で画像が指定サイズより小さくなる

困っております。

添付の画像なんですが、
float で、370px 幅のdiv を横並びにして、
その中に、それぞれ370px幅の画像を入れたいのですが、
なぜか、勝手に縮小されてしまいます。
これは、画像の詳細を見ると333px になっております。

上の横並びの画像と、下の画像は、全く同じものです。

HTMLとCSSを下記します。

どなたか、お知恵を拝借いただければ、助かります。
宜しくお願いいたします。

<div>
<div class="float_370"><img src="image/black370.jpg" alt=""></div>
<div class="float_370_2"><img src="image/black370.jpg" alt=""></div>
<div><img src="image/black370.jpg" alt=""></div>
</div>

.float_370 {
float:left;
margin:0;
padding:0;
width:370px;
}

.float_370 img {
width: 370px;
margin:0;
padding:0;
}

.float_370_2 {
float:left;
margin:0;
padding:0;
width:370px;
}

投稿日時 - 2018-07-30 12:01:08

QNo.9523270

困ってます

質問者が選んだベストアンサー

記載いただいたソースをほぼそのまま書いてみましたが、手元の環境では特に問題なく期待どおりの表示になりました。(画像添付します)
floatされているので、ブラウザの幅を狭くすると下に回り込みますね。

ここからは想像ですが、333pxは370pxのちょうど90%なので、何らかのスタイルで「該当のdivに内包される要素の幅を90%にする」などの指定がなされているのではないでしょうか。
一度CSSの中を「90%」や「0.9」で検索してみると、原因がわかるかもしれません。

ちなみに動作確認はIE11とChromeで行っていますが、どちらも同じ表示となりました。
ご参考になれば幸いです。

投稿日時 - 2018-07-30 21:02:00

お礼

これほど早く、解決策をいただけるとは思っていなかったので、感謝感謝です。

一番元になるCSSに

section.content img{
max-width:90%;
height:auto;
}

という記述がありました。

section.content > img{
max-width:90%;
height:auto;
}

と、上部のセクション直下の画像だけに90%が適用されるように変更したら、問題は解決しました。

本当にありがとうございます。

投稿日時 - 2018-07-30 22:12:36

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)