Harukiya Archives

2008/10/16

category /

2006/04/17

category / CSS

だいたい、どこかを弄るとなにか不具合が見つかるわけで「おお、これで Tips が書けるぞ」と考えるのは不健全でしょうか。

例えば、過去ログの中で横幅の大きな画像をすでに使ってしまっている。が、どういうわけか記事表示部がナロー幅なテンプレを使わなければならなくなったとしよう（他意はありません）。

幅指定ブロック要素（div）＞子ブロック要素（p）＞イメージ要素（img） という構造の場合で、領域内に収める（はみ出させない）方法はいくつかある。

イメージ要素のはみ出す部分を非表示にする

1. div {
2. width: 30%;
3. }
4. p {
5. width: 100%;
6. overflow: hidden;
7. }
8. img {
9. }

イメージ要素の幅を領域に合わせる

1. div {
2. width: 30%;
3. }
4. p {
5. width: 100%;
6. }
7. img {
8. width: 100% !important;
9. height: auto !important;
10. }

どちらも、イメージが置かれるボックスがナローかつ可変幅の場合、3カラムなどで有効。欠点として、第1案は狭くなるほど情報が切り捨てられる（pが画像の幅以上の場合、オリジナルが表示される）こと、第2案は狭すぎても広すぎても情報が劣化する（pが画像と同じ幅の場合だけ、オリジナルが表示される。それ以外でも切り捨ては行われない）こと。そこで、もうひとくふう。

領域が狭い場合のみ、イメージ要素の幅を領域に合わせる

CSSを正しく解釈するブラウザ向けです。

1. div {
2. width: 30%;
3. }
4. p {
5. width: 100%;
6. }
7. img {
8. width: 100% !important;
9. height: auto !important;
10. }
11. p > img {
12. width: auto !important;
13. max-width: 100%;
14. }

writeback

1. マス ： ブラウザで文字サイズを変えると効果がわかります（期間限定ネタ）
   というか、サムネイル使えよと。-17日21時
2. お名前 ： 　パス ：
   ご意見・ネタ・苦情など

< 影の功労者 | 39 > | 表紙へ戻る | 探す | 案内