カテゴリー:
画像
閲覧数:947 配信日:2015-08-06 20:33
案1-1.Media Queries
@media で切り替え
・min-width、max-width を併用しているため、「display: none;」「display: block;」で表示を制御
▼HTML
<img src="./img/normal/1/1.jpg" alt="" class="normalsize">
<img src="./img/thumbnail/1/1.jpg" alt="" class="thumbnailsize">
▼CSS
/* ▼表示領域が400px以上の場合 */
@media screen and (min-width: 400px) {
p.target img.thumbnailsize { display: none; } /* thumbnailsizeを非表示 */
p.target img.normalsize { display: block; } /* normalsizeを表示 */
}
/* ▼表示領域が400px未満の場合 */
@media screen and (max-width: 399px) {
p.target img.thumbnailsize { display: block; } /* thumbnailsizeを表示 */
p.target img.normalsize { display: none; } /* normalsizeを非表示 */
}
・ウインドウ幅に合わせて画像サイズを変化させる方法
案1-2.Media Queries
@media で切り替え
・min-widthのみ使用
▼HTML
<div class="target"></div>
▼CSS
.target {
height: 400px;
background-image: url(small.png); /* スマホ画像 */
background-repeat: no-repeat;
background-size: contain;
background-position-x: center;
}
@media (min-width: 500px) { /* 500px以上 */
body {
background-image: url(body.png);
}
.target {
background-image: url(large.png); /* タブレット画像 */
}
}・CSS 内での画像