带有图像和文本的框的纵横比/ Img变窄到高度[重复]

Question

我的网站上有一些带有图像的框，每当我将浏览器缩小到更小的宽度，或在移动设备上显示时，图像（圆圈）会改变纵横比并且不再是圆圈......只是窄椭圆形。

HTML/CSS + 下面的截图示例。

.imgElectroCont {
  display: flex;
  position: absolute;
  align-items: center;
  left: 0;
  margin: 40px 0 0 50px;
  opacity: 1;
  background-color:yellow;
}


.imgElectro {
  width: 150px;
  height: 150px;
  border-radius: 100%;
  border: 5px solid #fff;
  background-color:blue;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: 3px 3px 10px var(--colorGreyDark);
}

<div class="imgElectroCont">
  <div class="imgElectro"></div>
  <a href="">Some text here nex to image</a>
</div>

Answer 1

尝试给你的 .imgElectro 类 flex-shrink: 0;