图片和文字/图片框的长宽比变窄

问题描述

我的站点上有一些装有图像的盒子，每当我缩小浏览器的宽度或在移动设备上显示图像时，图像（圆圈）都会改变长宽比，不再是圆圈了。只是狭窄的椭圆形。

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

screenshot of container

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

解决方法

尝试为您的.imgElectro类提供flex-shrink：0;

aspect-ratio html