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

2020年12月1日

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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コード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.cft {
width: 100px;
border: 2px solid rgba(150, 150, 150, 255);
padding: 0.7em;
word-break: break-all;
}
.cft img {
width: 200px;
}
.cft { width: 100px; border: 2px solid rgba(150, 150, 150, 255); padding: 0.7em; word-break: break-all; } .cft img { width: 200px; }
.cft {
  width: 100px;
  border: 2px solid rgba(150, 150, 150, 255);
  padding: 0.7em;
  word-break: break-all;
}

.cft img {
  width: 200px;
}

 

CSS

Posted by arkgame