0

CSS の初心者で、ebook と Google で答えを見つけようとしましたが、見つかりませんでした。だから我慢してください:D

レスポンシブ Web を作成したいので、これが私のmetaタグです:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

これは私のコードの一部で、幅の広い画像が含まれています:

<div id="desc">
        <img alt="" src="images/MallDetail/MallDesc.png">
</div>

この画像を現在の画面に合わせるために、CSSで現在の画面の幅と同じ大きさにしようとしました。ただし、次のコードは機能しません。

#desc {
    width: 100%;
}

だから、私はこのcssとその動作を試しました:

#desc img {
    width: 100%;
}

私の質問は、最初の css コードが機能しないのはなぜですか?それは 2 番目のものと同じである必要があります。%?または上記のmetaタグに関連していますか?

お時間をいただきありがとうございます:D

4

4 に答える 4

2

最初の css ルールでは、div 要素に 100% の幅を割り当てていますが (ブロック要素として、デフォルトで 100% 幅になっています)、画像はデフォルトでインライン置換された要素であるため、その幅を広げます。

2 番目のルールでは、代わりに画像に幅を割り当てているため、結果として画像が引き伸ばされます。

于 2013-06-21T16:09:38.353 に答える
1

まず、コンテナの幅を作りますdiv 100%。しかし、widthプロパティはinherited(他のいくつかの css プロパティとは異なり) そうimgではないため100%、最初のものにはありません。

2 つ目では、widthのを作成しましたimg 100%。親widthは子要素を取得します。また、divはブロック要素なので、コンテナdivもタグ100%と一緒です。img

于 2013-06-21T16:10:48.813 に答える