Question

点击后，我有一个想要放大的图像。我的代码看起来像这样：

.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>

如示例所示，图像超出了窗口边框。我需要使图像保持在该边界内，尽管仍然可以扩展到其宽度为100％。

Answer 1

将 transform-origin：左上； 添加到了几个类 .siteFeatures img { 和 .siteFeatures输入[type = checkbox]：已选中〜标签> 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>

防止图像超出窗口大小

1 个答案: