ホームページ > 記事 > ウェブフロントエンド > imgタグのdisplay:block属性設定時に幅を100%に設定できない問題の解決方法

imgタグのdisplay:block属性設定時に幅を100%に設定できない問題の解決方法

不言オリジナル: 2018-08-15 13:55:484441ブラウズ

この記事で説明するのは、imgタグのdisplay:block属性を設定する際に幅を100%に設定できない問題の解決方法です。非常に詳細で、必要な友人は参考にしてください。お役に立てば幸いです。

現象

以下のコード、imgタグにdisplay:blockを設定しているため、サイズ幅を100%に設定できない

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img标签设置display:block，宽度无法100%</title>
</head>
<body>
    <p>
        <img src="https://www.baidu.com/img/bd_logo1.png?where=super" style="display: block;">
    </p>
</body>
</html>

理由

置換される要素と置換されない要素

要素はドキュメントの基礎となるCSS の構造。各要素は、要素のコンテンツを含むボックス (ボックス、「ボックス」とも訳される) を生成します。ただし、要素が異なれば表示方法も異なります。たとえば、p はspan とは異なり、strong は p とは異なります。文書型定義 (DTD) では、さまざまな要素に対してさまざまな型が指定されます。これが、DTD が文書にとって重要である理由の 1 つです。要素自体の特性に応じて、置き換えられる要素 (置き換えられる要素) に分けることができます。 W3C では非置換要素は明確に定義されていませんが、非置換要素に対応する置換要素を持つことができるため、置換要素を除いた他の要素は非置換であると理解できます。要素

要素の置換: ブラウザは、タグと属性に基づいて要素の具体的な表示コンテンツを決定します。置換要素は、img タグ、埋め込みドキュメント (iframe など)、またはアプレットなど、CSS 視覚書式設定モデルによってコンテンツが制御されない要素です。これらは置換要素と呼ばれます。たとえば、img 要素は画像情報を読み取り、src 属性の値を通じて表示します。ただし、(x)html コードを表示すると、画像の実際の内容は表示されず、img 要素の内容は次のようになります。通常は src 属性で指定された画像に置き換えられます。たとえば、input 要素の type 属性は、入力ボックスやラジオボタンなどを表示するかどうかを決定します。 (x) htmlのimg、input、textarea、select、objectはすべて置換要素です。これらの要素には実際のコンテンツはありません。つまり、空の要素です。

非置換要素: (X) HTML のほとんどの要素は、ブラウザにコンテンツを直接伝え、それを表示します

img タグ。は置換要素です。置換要素の特徴の 1 つは、表示属性値が inline か block かに関係なく、サイズが内部要素によって決定されることです。この機能は非常に興味深いもので、非置換要素の表示属性値がブロックの場合、幅は外部サイズによって決まりますが、置換された要素の幅は表示レベルの影響を受けません。、表示レベルはサイズを変更できません

100% 適応親コンテナーの解決策

解決策は、の幅サイズを 100% に設定することです

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img标签设置display:block，宽度无法100%</title>
</head>
<body>
    <p>
        <img src="https://www.baidu.com/img/bd_logo1.png?where=super" style="display: block;width: 100%;">
    </p>
</body>
</html>

imgタグのdisplay:block属性設定時に幅を100%に設定できない問題の解決方法

現象

理由

置換される要素と置換されない要素

100% 適応親コンテナーの解決策

関連記事