<div class="container">
<img alt="A baby smiling with a yellow headband." src="https://www.w3cplus.com/sites/default/files/blogs/2021/2110/baby-640w.jpg" srcset="
https://www.w3cplus.com/sites/default/files/blogs/2021/2110/baby-320w.jpg 320w,
https://www.w3cplus.com/sites/default/files/blogs/2021/2110/baby-640w.jpg 640w,
https://www.w3cplus.com/sites/default/files/blogs/2021/2110/baby-960w.jpg 960w,
https://www.w3cplus.com/sites/default/files/blogs/2021/2110/baby-1280w.jpg 1280w,
https://www.w3cplus.com/sites/default/files/blogs/2021/2110/baby-1920w.jpg 1920w,
https://www.w3cplus.com/sites/default/files/blogs/2021/2110/baby-2560w.jpg 2560w" sizes="
(max-width: 500px) calc(100vw - 2rem),
(max-width: 700px) calc(100vw - 6rem),
calc(100vw - 9rem - 200px)
" />
</div>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
font-family: "Exo", Arial, sans-serif;
background-color: rgb(237 242 247);
display: grid;
place-items: center;
padding: 2rem;
}
img {
max-width: 100%;
border: 10px solid white;
box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.2);
transform: rotate(3deg);
}
.container {
max-width: calc(100vw - 200px - 4rem);
display: grid;
gap: 1rem;
}
@media (max-width: 700px) {
.container {
max-width: calc(100vw - 2rem);
}
}
@media (max-width: 500px) {
body {
margin: 0;
}
.container {
max-width: 100vw;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.