您现在的位置是：网站首页> 编程资料编程资料
详解flex布局下图片变形的解决方法使用Flex布局实现头部固定内容区域滚动的方法详解flex布局与position:absolute/fixed的冲突问题Flex布局实现div内部子元素垂直居中的示例Flex布局让子项保持自身高度的实现让CSS flex布局最后一行列表左对齐的N种方法(小结)css3 flex布局实现平均分配元素的示例代码flex布局实现上下固定中间滑动的布局方式flex是什么及flex布局语法教程详解
2023-10-17
474人已围观
简介 这篇文章主要介绍了详解flex布局下图片变形的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
flex布局是现在常用的一个布局方式，但是有时候也会导致出现一些小问题。本人在使用flex布局做一个左边头像，右边文字的时候，发现固定图片的宽度时，图片宽度仍然发生了变化。
下图是头像本应该是圆形的，但是被挤压变形了。
Tony
没错，我就是你们的Tony老师，快来找我剪头发吧！
/* 父元素 */ .people { display: flex; } /* 头像 */ .avatar { width: 64px; height: 64px; border-radius: 32px; } /* 人物介绍 */ .des { margin-left: 24px; }
网上查找常用的办法是在 img 标签外再套一个 div
Tony
没错，我就是你们的Tony老师，快来找我剪头发吧！
还有一种更简单的方法是直接给头像的css添加 flex-shrink: 0 更为简单
/* 头像 */ /* flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 */ /* 如果某一个元素的 flex-shrink 属性为 0，其他项目都为 1，空间不足时，值为 0 的不缩小。 */ .avatar { flex-shrink: 0; width: 64px; height: 64px; border-radius: 32px; }
到此这篇关于详解flex布局下图片变形的解决方法的文章就介绍到这了,更多相关flex图片变形内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
相关内容
- CSS3 input框的实现代码类似Google登录的动画效果css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
- 永恒战士3 装备合成与精练的方法解析_手机游戏_游戏攻略_
- 我叫MT 魔能风暴组合详细介绍_手机游戏_游戏攻略_
- 神偷奶爸小黄人快跑维克多之战打法攻略_手机游戏_游戏攻略_
- 冰火王座猎人详细介绍_手机游戏_游戏攻略_
- 冰火王座法师详细介绍_手机游戏_游戏攻略_
- 冰火王座战士详细介绍_手机游戏_游戏攻略_
- 冰火王座潜行者详细介绍_手机游戏_游戏攻略_
- 神雕侠侣 所有称谓获得方法_手机游戏_游戏攻略_
- 全民英雄 敏捷英雄幽鬼进化的方法_手机游戏_游戏攻略_
