如何使图像适合父母的范围?

我在我的zoomContainer中拟合图像时遇到问题。尽管父级为66vh,但img标签(用%代替vh)不适合div,而是从顶部和底部溢出。

我希望我的img以100%的宽度适合父级。似乎更喜欢页面的大小。与父级(而不是页面)缩放。

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