<h1>Responsive image&nbsp;setup</h1>


<section class='name-of-context'>
  
  <picture class='logo'>
    <img src="https://peprojects.dev/images/landscape.jpg">
  </picture>

</section>



<section class='name-of-context'>
  
  <picture class='portrait'>
    <img src="https://peprojects.dev/images/portrait.jpg">
  </picture>
  
  <p>Resize the viewport to see how the images adjust</p>

</section>



<section class='name-of-context'>
  
  <p>Note for trolls: <em>Yes</em>, we will also programatically set the width and height attributes / and alt and loading.... etc.</p>

</section>

/* ^ includes codepen "RESET" */


/* "SETUP" (this would be site-wide) */
picture {
  display: block;
  /* it's inline by default for some reason */
}

picture img {
  display: block;
  /* it's inline-block by default */
  width: 100%;
  height: auto;
  /* allow it to fully fill it's parent element! */
}


/* STYLES */
.logo {
  max-width: 90px;
  /* 
    make sizing very simple!!!
    images will never break the layout
    and - this is just 1 simple number
    allow the image to fill the parent
    just set the max is should be allowed to be
    all styling on the parent picture
    very rare to style the img 
  */
}

.portrait {
  max-width: 300px;
}






























































/* just for presentation */
body {
  padding: 40px 14px 100px;
}

section + section {
  margin-top: 20px;
}

picture + p {
  margin-top: 20px;
}


h1 {
  font-family: "Helvetica", sans-serif;
  font-size: 40px;
  margin-bottom: 40px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.