レスポンシブ画像 - 余分なパディング?

StackOverflow https://stackoverflow.com/questions/9359121

  •  28-10-2019
  •  | 
  •  

質問

レスポンシブデザイン用に設定されたWordPressのFoundationテーマを使用してWebサイトをプログラミングしていますが、画像に問題があります。

firebug では確認できない追加の下部パディングが得られます。これは私が持っているもののモックであり、問​​題はjsFiddleに表示されるため、テンプレートとは何の関係もないと思います。

<div class="container">
    <img src="http://www.lamasia.es/web/new/wp-content/uploads/imagen3.png" alt=""/>
</div>

img{
  height:auto;
  max-width:100%
}

.container{
  background-color:#ccc;
  padding:2%;
  width:40%;
}

http://jsfiddle.net/dbCsY/

これに関するいくつかの回答を読んだところ、パディングをパーセンテージとして使用すると言う人もいましたが、私はそうしましたが、問題は解決しませんでした。なぜこれが起こっているのでしょうか?どうすれば修正できますか?

役に立ちましたか？

解決

この問題は、このインラインに配置された要素のデフォルトの垂直方向の配置に関連しています。これを見れば挙動が理解できる MDN ドキュメント ページ：

したがって、要素の表示プロパティを変更するか、 vertical-align プロパティ（表示を変更しないので良いと思います）

他のヒント

画像にdisplay:blockスタイルを設定すると、それがソートされます:)

例えば http://jsfiddle.net/dbCsY/

display:block あなたの修正になるはずです.. http://jsfiddle.net/dbCsY/1/

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top