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

我遇到了一个问题,如何将我的图片放在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>

解决方案:

也许可以试试 align-items: stretch 容器上 div. 要么,你可以将子#b10 div绝对定位,这使得它相对于父体定位,默认情况下,除非你告诉它不要定位,否则,上、下、左、右的值都会留在父体内。

给TA打赏
共{{data.count}}人
人已打赏
未分类

如何使用单个Elastic搜索查询进行重复数据删除和执行聚合?

2022-9-9 5:19:20

未分类

LinkedList中的返回null基本上就是返回null

2022-9-9 5:19:22

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索