带有图像和文本的框的纵横比/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 class flex-shrink: 0;

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

Aspect ratio of box with image and text / Img goes narrow to height

html

css

aspect-ratio