gorogoronyan FC2

HTML: img タグ (1)

概略

基本的なサンプル (2023/07)

TestHTML_img_title01.html
画像にポップアップ表示の説明を付ける。title 属性。

img にリンクを付ける

TestHTML_img_a_hover01.html
a リンクの :hover で効果をかけると img の下側まで効果がかかる話と対処方法。
img タグを並べたときも画像の周囲に余白ができるなど似た話が 出てきます。CSS vertical-align が関係しています。
TestHTML_img_gap01.html
img タグ (2) - img タグを並べる
CSS: vertical-align

関連: CSS background

CSS background でも画像を表示することができます。 ページや要素の背景画像を指定するときに使います。 用途によっては img タグを使わず CSS background や ::before 擬似要素, ::after 擬似要素を使った方が便利な話もあります。

TestHTML_a_href_icon01.html
リンク (a タグ) にアイコンをつける。 CSS background で a タグに背景画像を入れる例。

img のセンタリングなど (2023/07)

img タグ内の画像の位置調整では CSS の object-fitobject-potion が使えます。 画像の縦横比を保ちながら img の枠内に収まるように自動調整して表示できます。

TestCSS_object_fit_img01.html
CSS object-fit のサンプル。
CSS: 要素の配置: 左右中央, 上下中央

object-fit や object-position は Edge79 (Chromium Edge, 2020年) 以降で使用可能な比較的新しいプロパティです。

object-fit や object-position を使えるタグは img タグ, video タグなどです。div や figure などには使用できない点に注意。
MDN: 置換要素

img タグを並べる

HTML: img タグ (2) - img タグを並べる

img とテキストを並べる

HTML: テキストと画像を並べる

CSS transform で img 画像を変形する

TestCSS_transform_img1.html
img 要素の画像を CSS transform で回転させるサンプル。
CSS transform - 変形・回転など
HTML をドローソフト代わりに使う (1)

関連: SVG 要素内の transform

SVG では CSS とは別に SVG の属性でも transform の指定ができます。
TestSVG_arrow01.html
svg タグ: transform で図形を操作する

いろいろ (2023/06)

関連

番外

inserted by FC2 system