ant design pro 图片缩放比例不变的

最新推荐文章于 2024-03-17 23:37:02 发布

不愿透露姓名的唐马儒先生

最新推荐文章于 2024-03-17 23:37:02 发布

阅读量618

点赞数

文章标签： css html react

本文链接：https://blog.csdn.net/qq_39314683/article/details/121253630

版权

出现比例不同的图片显示问题(仅提供思路)

解决如下

  <span className={styles.content_avatar}>
              <img src={(getFileUrl() + props.data.projectLogo) }  
                   className={styles.img}>
              </img>
  </span>

.less文件

.content_avatar{
               
  border-radius: 50%;      
  margin: 0% 1% 0% 2%;
  max-width: 100%;
  width: 4.7rem;
  height: 4.7rem;
  overflow: hidden; // 超出部分隐藏
  display: flex;   // 弹性布局
  justify-content: center; // 居中排列
  align-items: center;  // 元素位于容器的中心
  .img {
      width: 100%;
  }
}