프론트엔드 센트럴파크 (☞ﾟヮﾟ)☞

반응형 이미지 - srcset 본문

HTML

반응형 이미지 - srcset

자라나라나무나무나 2022. 5. 27. 22:54 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="printpage.css" />
</head>
<body>
    <h2>반응형 이미지</h2>

    <img src="/images/600.png"
    srcset="images/300.png 300w, images/450.png 450w, images/600.png 600w "
    alt="responsive images"/>
</body>

</html>

 

 

srcset 에서 지정한 300, 450, 600 의 가로길이 보다 화면의 가로길이가 초과 될 경우,

300 넘으면 300이미지, 450 넘으면 450 이미지, 600 넘으면 600 이미지가 나온다. 

w 600이 넘은 경우, 600에 설정된 사진보다 창이 커지면 같이 커진다.

물론 세로길이 설정도 가능하다!

 

 

참고 

https://developer.mozilla.org/ko/docs/Web/HTML/Element/img#attr-srcset

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

video  (0) 2022.05.29
반응형 이미지 - sizes  (0) 2022.05.27
표 - table, tr, th, td  (0) 2022.05.22
정의목록 - dl, dt, dd  (0) 2022.05.22
let(변수) 사용법  (0) 2022.04.28
'HTML' Related Articles more
Comments