<main>  
<h1>Some Page</h1>
    <p>Lorem ipsum dolor sit amet, id vivendo apeirian accommodare sea. His adhuc tation omittantur no, mei ne vocent scripta ancillae. Choro quando eu vix, et dicant exerci fierent cum, vis constituto reprehendunt in. Mel te munere numquam. Vis no commune placerat eleifend, no soluta recteque ius, dolorum mediocrem vim ex. Eu graeci tacimates evertitur sit, an nec vide dicta.</p>
    <figure>
      <img src="http://placehold.it/200x150" width="200" height="150" alt="test">
      <figcaption>This caption is a bit long and is wider than the image, taking up too much space</figcaption>
    </figure>
    <p>Nihil insolens vulputate eam cu, nam elitr deleniti vituperata in, no primis scripta usu. Eam ex ridens euripidis assueverit. In autem docendi per. His ubique vivendo constituto an, omnes elaboraret vis ea. Eu quo impedit platonem interesset, eum id nullam quaeque tacimates. Invenire qualisque qui ut, an nam autem iriure prompta.</p>
    <p>Usu eu vidit numquam. Eu has tollit perfecto. Ea sea invenire adolescens, mea ornatus omnesque id, cum at novum dolore. Discere legimus in nec. Cibo aeque tamquam his ad. Diam causae inermis at his, sint fabellas singulis sit ut.</p>
    <figure class="capfit">
      <img src="http://placehold.it/200x150" width="200" height="150" alt="test">
      <figcaption>This caption is also long, but wraps to the size of the image.</figcaption>
    </figure>
    <p>Lorem ipsum dolor sit amet, id vivendo apeirian accommodare sea. His adhuc tation omittantur no, mei ne vocent scripta ancillae. Choro quando eu vix, et dicant exerci fierent cum, vis constituto reprehendunt in. Mel te munere numquam. Vis no commune placerat eleifend, no soluta recteque ius, dolorum mediocrem vim ex. Eu graeci tacimates evertitur sit, an nec vide dicta.</p>
    <p>Nihil insolens vulputate eam cu, nam elitr deleniti vituperata in, no primis scripta usu. Eam ex ridens euripidis assueverit. In autem docendi per. His ubique vivendo constituto an, omnes elaboraret vis ea. Eu quo impedit platonem interesset, eum id nullam quaeque tacimates. Invenire qualisque qui ut, an nam autem iriure prompta.</p>
    <p>Usu eu vidit numquam. Eu has tollit perfecto. Ea sea invenire adolescens, mea ornatus omnesque id, cum at novum dolore. Discere legimus in nec. Cibo aeque tamquam his ad. Diam causae inermis at his, sint fabellas singulis sit ut.</p>
    <p>Lorem ipsum dolor sit amet, id vivendo apeirian accommodare sea. His adhuc tation omittantur no, mei ne vocent scripta ancillae. Choro quando eu vix, et dicant exerci fierent cum, vis constituto reprehendunt in. Mel te munere numquam. Vis no commune placerat eleifend, no soluta recteque ius, dolorum mediocrem vim ex. Eu graeci tacimates evertitur sit, an nec vide dicta.</p>
</main>

body {
  background: #333;
  font-family: sans-serif;
}
main {
  background: #fff;
  width: 90%;
  max-width: 50em;
  margin: 0 auto;
  text-align: center;
}
p,
h1 {
  margin: 1em;
  text-align: justify;
}
figure {
  font-style: italic;
  font-family: serif;
}
img {
  max-width: 100%;
  height: auto;
}
.capfit {
  display: inline-table;
  width: 1%;
  margin: 1em auto;
}
.capfit img {
  max-width: calc(100vw - 4em);
}
@media screen and (min-width: 28em) {
  figure {
    float: right;
  }
  .capfit {
    width: 1%; /* Shrink to fit */
    margin: 1em;
  }
  .capfit img {
    max-width: calc(50vw - 4em); /* Squeeze image before breakpoint */
  }
}