1

次のワードプレスサイトに画像を入れました：

http://sofrahomemadefood.com/menu/

画像は大きいです。したがって、コンテナを超えて実行されます。次の図に示すように、次のリージョンによってカバーされます。

画像が周囲に隠れる

この理由と、画像が隠されないようにする方法を知りたいですか?

4

1 に答える 1

3

理由はこのhtmlのチャンクです：

<img class="alignnone" title="Menu" src="http://i.imgur.com/OKRf1h.jpg" alt="" width="1024" height="663">

（これは埋め込み画像です。幅と高さの属性に注意してください）

あなたはそれを修正することができます：

img.alignnone{
    width: auto; /*You may want to flag this !important for some browsers*/
    height: auto; /*You may want to flag this !important for some browsers*/
    max-width: 100%;
    max-height: 100%;
}

これは何をしますか：

  • 画像の航海アスペクト比はwidth:auto、height:auto
  • max-height:100%画像は、およびによってその親要素の境界から外れるのを防ぎます。max-width:100%

補足：

常に画像を親の幅/高さに合わせて拡大縮小したい場合は、アスペクト比を維持します。アスペクト比を維持するために、（min-width:100%幅）またはmin-height:100%高さを使用できます。width:autoheight:auto

画像を一定のサイズに保ち、コンテンツ領域から流出させたい場合は、style.cssの202行目overflow:hiddenのセレクターから削除できます。div.maincontent

于 2012-09-05T06:52:39.940 に答える