imgタグのdisplay:block属性設定時に幅を100%に設定できない問題の解決方法-CSSチュートリアル-php.cn

現象

理由

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

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

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

不言

Aug 15, 2018 pm 01:55 PM

css

この記事で説明するのは、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>

ログイン後にコピー

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7658

CakePHP チュートリアル

1393

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

156

Related knowledge

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

HTML、CSS、およびJavaScriptの理解：初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

ブートストラップボタンの使用方法 Apr 07, 2025 pm 03:09 PM

ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。