CodePen Embed - 뷰포트 너비에 따른 반응형 이미지

<picture class="u-12/12">
    <source width="320" height="180" 
            srcset="https://placekitten.com/320/180"
            media="(max-width: 640px)">
    <source width="320" height="320"
            srcset="https://placekitten.com/320/320"
            media="(min-width: 641px)">
    <img src="https://placekitten.com/320/320"
         width="320" height="320" 
         alt="Cat">
</picture>

<p>640px을 기준으로 16:9 이미지와 1:1 이미지가 왔다갔다 합니다.</p>

This Pen is owned by An, Hyeong-woo on CodePen.

See more by @mytory on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.