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;
}

回答No.1

gadgetwatch · ベストアンサー

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

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

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

お礼

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

一番元になるCSSに

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

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

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

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

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