时间戳

首页 > 解决方案 > 如何使图像适合父母的范围？

html - 如何使图像适合父母的范围？

问题描述

我在将图像放入 zoomContainer 时遇到问题。尽管父级是 66vh，但 img 标签（用 % 代替 vh）不适合 div，而是从顶部和底部溢出。

我希望我的 100% 宽度的 img 适合父级。它似乎更喜欢页面的大小。使用父级而不是页面进行缩放。

.zoomContainer {
  height: 66vh;
  width: 90vw;
  background: white;
  margin: auto;
  border-radius: 2px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

#b1,
#b2,
#b3,
#b4,
#b5,
#b6,
#b7,
#b8,
#b9,
#b10,
#b11,
#b12,
#b13,
#b14,
#b15,
#b16,
#b17,
#b18 {
  padding-left: 1vh;
  padding-right: 1vh;
  text-align: center;
  justify-content: center;
  align-items: center;
  position: relative;
}

#b10 #logoField10 {
  position: relative;
  border-radius: 50%;
  width: 33.369vh;
  transform: rotate(0deg);
  border: 2px solid red;
  display: block;
}
<div class="zoomContainer zoomTarget selectedZoomTarget zoomNotClickable" style="transform-origin: 864px 309.203px; transform: translate(0px, 0px) rotate(0rad) skewX(0rad) scale(1, 1);">
  <div id="b10" class="alive zoomTarget">
    <img id="logoField10" data-targetsize="0.6" data-closeclick="true" data-duration="801" src="https://www.thespruce.com/thmb/xqYicKgLaKBjNsBoZibddoEs2U8=/2050x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/109235035-56a8856a3df78cf7729e87a6.jpg"
      alt="" srcset="" style="width: 100%" ;>
    <p class="BxText">5,623,058<br> Unique Ppl</p>
  </div>
</div>

标签： htmlcss

解决方案

Perhaps try align-items: stretch on the container div. Either that you can position the child #b10 div absolutely, which makes it position itself relative to the parent and by default stays within the parent, unless you tell it not to, with top, bottom, left, right values.

推荐阅读