「CSS入門」imgのsrcset属性を使うサンプル
説明
一般的なディスプレイ 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>
<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コード
.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; }