flex布局下图片不变形的方法是什么?
Admin 2021-10-11 群英技术资�
flex布局下图片不变形的方法是什么?一些朋友可能对flex布局比较熟悉,因为flex布局是比较常用的一个布局方式,虽然flex布局很好用,但是在使用flex布局也会存在一些问题,例如导致图片变形的情况,那么我们怎样才能让flex布局下的图片不变形的呢?下面给大家分享一个示例�
下图是头像本应该是圆形的,但是被挤压变形了�
<div class="people"> <img class="avatar" src="./avatar.jpg" alt="avatar"> <div class="des "> <p>Tony</p> <p>没错,我就是你们的Tony老师,快来找我剪头发吧!</p> </div> </div>
/* 父元� */ .people { display: flex; } /* 头像 */ .avatar { width: 64px; height: 64px; border-radius: 32px; } /* 人物介绍 */ .des { margin-left: 24px; }
网上查找常用的办法是� img 标签外再套一� div
<div class="people"> <div><img class="avatar" src="./avatar.jpg" alt="avatar"></div> <div class="des "> <p>Tony</p> <p>没错,我就是你们的Tony老师,快来找我剪头发吧!</p> </div> </div>
还有一种更简单的方法是直接给头像的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布局有帮助,想要了解更多实现flex布局的内容,大家可以继续浏览群英网络其他相关的文章�
文本转载自脚本之�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
这篇文章主要给大家分享的是关于CSS多个背景使用方式及实际好处,我们知道CSS中的background背景属性是很常使用的一个属性,下文对大家深入学习background背景属性也有一定的帮助,感兴趣的朋友接下来就跟随小编来学习一下吧�
本文通过实例代码给大家介绍了基于csss3实现多样的边框效果,有半透明边框,多重边框,边框内圆角,具体效果图和实现代码大家参考下本文
现在很多朋友都有用B站,其中B站有一个给up主充电的功能,小编觉得挺有意思的,因此这篇文章就给大家分享一下用css+svg怎样做B站的充电动画效果,感兴趣的朋友就继续往下看吧�
这篇文章主要介绍了纯CSS实现导航栏下划线跟随效果,本文图文并茂实例代码详解,给大家介绍的非常详细,需要的朋友参考下�
在css中,可以利用“transform-Origin”属性设置元素旋转点的位置,该属性允许更改转换元素的位置,可以分别设置元素转换后与X、Y和Z轴之间的位置,语法为“transform-origin:X轴方� Y轴方� Z轴方�;”�
推荐内容
联系我们
24小时售后 � 24小时售后TEL�0668-2555666 售前咨询TEL�400-678-4567 投诉建议TEL�0668-2555999 投诉建议邮箱:t[email protected] 信息安全TEL�0668-2555118 域名空间客服 � 公司总机�0668-2555555 公司传真�0668-2555000