Prevent image from exceeding window size

Question

I have an image that I want to expand once clicked on. I have it with the code looking like this:

.siteFeatures {
  display: flex;
  flex-wrap: wrap;
}

.siteFeatures div {
  display: inline-block;
}

.feature {
  margin: 5px;
}

.siteFeatures input[type=checkbox] {
  display: none;
}

.siteFeatures img {
  height: 10rem;
  transition: transform 0.25s ease;
  transform-origin: top left;
  cursor: zoom-in;
}

.siteFeatures input[type=checkbox]:checked ~ label > img {
  transform: scale(3);
  transform-origin: top left;
  cursor: zoom-out;
}

<div class="siteFeatures">
    <div class="feature teamRandomizerFeature">
        <p>Randomize Teams!</p>
        <input type="checkbox" id="zoomCheckRandomizer">
        <label for="zoomCheckRandomizer">
            <img src="https://www.pokemondatabase.net/images/general/teamRandomizer.png">
        </label>
    </div>
    <div class="feature typeEvaluator">
        <p>Lookup Type Combinations!</p>
        <input type="checkbox" id="zoomCheckTypingEvaluator">
        <label for="zoomCheckTypingEvaluator">
            <img src="https://www.pokemondatabase.net/images/general/typingEvaluator.png">
        </label>
    </div>
    <div class="feature eggGroupEvaluator">
        <p>Lookup Egg Group Combinations!</p>
        <input type="checkbox" id="zoomCheckEggGroupEvaluator">
        <label for="zoomCheckEggGroupEvaluator">
            <img src="https://www.pokemondatabase.net/images/general/eggGroupEvaluator.png">
        </label>
    </div>
</div>

As you can see with the example, the image goes past the window border. I need the image to stay within that border, though still able to expand until it's width is 100%.

It seems to not be possible with pure CSS: https://stackoverflow.com/questions/39410636/scale-dom-element-to-fit-inside-its-parent-with-css, https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/ — Loi Nguyen Huynh, Dec 20 '19 at 04:01
That's entirely fine. I'm ok with using javascript and/or jQuery — Dakota Worzella, Dec 20 '19 at 04:04

score 1 · Answer 1 · answered Dec 20 '19 at 03:50

Added transform-origin: top left; to couple of classes .siteFeatures img { and .siteFeatures input[type=checkbox]:checked ~ label > img {

.siteFeatures input[type=checkbox] {
  display: none;
}

.siteFeatures img {
  transform-origin: top left;
  height: 10rem;
  transition: transform 0.25s ease;
  cursor: zoom-in;
}

.siteFeatures input[type=checkbox]:checked ~ label > img {
  transform: scale(3);
  transform-origin: top left;
  cursor: zoom-out;
}

<div class="siteFeatures">
  <div class="feature teamRandomizerFeature">
      <p>Randomize Teams!</p>
      <input type="checkbox" id="zoomCheckRandomizer">
      <label for="zoomCheckRandomizer">
          <img src="https://www.pokemondatabase.net/images/general/teamRandomizer.png">
      </label>
  </div>
</div>

Prevent image from exceeding window size

1 Answers1