「CSS入門」imgのsrcset属性を使うサンプル

2014年5月9日2020年12月1日

説明
一般的なディスプレイ　1x指定
高いディスプレイ　　　2x指定
htmlコード

<div class="cft">
  <img src="/data/cft/test_01.png"
       alt="TestInfo"
       srcset="/data/cft/test_01.png 1x, /data/cft/test_02.png 2x, /data/cft/test_03.png 3x">
</div>

CSSコード

.cft {
  width: 100px;
  border: 2px solid rgba(150, 150, 150, 255);
  padding: 0.7em;
  word-break: break-all;
}

.cft img {
  width: 200px;
}