JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<input type="checkbox" id="c">
  <label for="c">Constrain images</label>

  <article>
    <h1>This image is </h1>
    <p><strong>Toggle the checkbox above to fix this.</strong></p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem incidunt deleniti ipsam quis id quaerat iusto natus expedita excepturi laborum provident inventore recusandae, odio reiciendis sint repellat, aliquam perspiciatis magnam similique ex reprehenderit qui neque sequi. Odit, obcaecati fugit suscipit sapiente error asperiores, similique voluptatum dicta praesentium quae sunt aspernatur laborum eos recusandae dolor repellendus id rem, alias ut! Soluta, molestiae, distinctio? Quibusdam fuga expedita quod, a velit impedit! Atque nisi officiis assumenda. Ipsa quasi cumque consequatur provident cum ad nesciunt beatae, omnis, perspiciatis deserunt. Amet maiores nemo itaque, temporibus rerum aliquid molestias velit tenetur ut deleniti perferendis autem suscipit modi, optio nam, maxime? Similique quod, non nesciunt. Obcaecati eum quia velit mollitia, non possimus aspernatur sequi, placeat, quae consequatur commodi vitae molestiae cumque dolore esse corrupti tempore repellat doloribus. Necessitatibus, magnam iure magni perspiciatis voluptatum. Et, mollitia totam ad. Quibusdam assumenda molestiae laborum, corporis porro rerum quo. Ducimus debitis corporis veniam at possimus sit assumenda? Doloribus aut quidem, quos quas voluptas illo obcaecati voluptate excepturi labore ab molestias cum atque sit. Corporis pariatur est alias illo, omnis distinctio quasi. Iste omnis ipsa tempore non accusantium molestias dolore facere, veniam quasi eum! Quod obcaecati commodi est neque dolores. Autem, atque.</p>

    <img src="https://i.imgur.com/8wISz4R.jpg" alt="" />

    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto doloremque nesciunt tenetur fugit perferendis, dignissimos tempora hic suscipit. Debitis, reprehenderit. Consectetur unde error commodi! Excepturi ipsum...

CSS

input[type=checkbox]:checked~article img {
  max-height: 90vh;
  display: block;
  margin: 0 auto;
}

/* Junk below */
article h1::after {
  content: "way too big.";
}

input[type=checkbox]:checked~article h1::after {
  content: "a nice, viewable size for your screen.";
}

body {
  font-family: sans-serif;
}