Как я могу сделать изображение вписывающимся в рамки родительского?

Question

У меня проблема с подгонкой моего изображения в моем 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>

Answer 1

Возможно, попробуйте align-items: stretch на контейнере div. Либо то, что вы можете позиционировать дочерний элемент # b10 абсолютно, что делает его позиционирующим себя относительно родителя и по умолчанию остается в пределах родительского элемента, если только вы не скажете, чтобы это не было, со значениями top, bottom, left, right.