<picture>
  <source srcset="https://assets.codepen.io/210284/portrait_1.png" media="(orientation: portrait)">
  <source srcset="https://assets.codepen.io/210284/landscape_1.png" media="(orientation: landscape)">
  <img src="https://assets.codepen.io/210284/default_1.png" alt="An image with art direction">
</picture>
img {
  width: 100%;
  max-width: 700px;
  height: auto;
}

External CSS

  1. https://codepen.io/tutsplus/pen/vYrpEwd.css

External JavaScript

This Pen doesn't use any external JavaScript resources.