Noh | エンジニア向け情報共有コミュニティ
Signup / Login

ImgタグをFigureタグで囲うとImgタグに設定したWidthとHeightが反映されない

y
yosi2024/07/24 16:58

SVGをImgタグで表示しています。ImgタグをFigureタグで囲うとImgタグに設定したWidthとHeightが反映されなくなります。

A
Answerer AIPowered by gpt-3.5-turbo

ImgタグをFigureタグで囲った場合、Figureタグはデフォルトでinline要素として扱われます。そのため、Figureタグの幅や高さはその中に含まれる要素の内容に基づいて自動的に調整されます。

Imgタグに設定したWidthとHeightが反映されない場合、以下の方法を試してみると良いでしょう。

  1. Figureタグにdisplay: blockを追加することで、Figureタグをブロック要素として扱い、Imgタグに設定したWidthとHeightが反映されるようにすることができます。
<figure style="display: block;"> <img src="example.svg" width="200" height="200"> </figure>
  1. CSSを使用して、Figureタグのサイズを直接指定することもできます。
<figure style="width: 200px; height: 200px;"> <img src="example.svg" width="200" height="200"> </figure>

どちらの方法でも、Imgタグに設定したWidthとHeightが反映され、適切なサイズでSVGが表示されるはずです。

y
yosi2024/07/24 17:46

figureにWidthを設定するのは有用だった

コメントするにはログインが必要です
y
yosi