小程序 css flex的子元素图片被周边元素text挤压变形

已于 2023-06-24 22:12:42 修改
阅读量1k 收藏 1
点赞数
文章标签： 小程序 css 前端
于 2023-06-24 21:58:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LlanyW/article/details/131367118
版权
在Flex布局下，子元素会自动拉伸。文章提到了三种解决方案：1)给图片添加`flex:none`防止拉伸；2)为所有子元素设定固定宽度；3)对过长文本设置`max-width`限制宽度。这些方法有助于保持元素的原始尺寸和布局稳定性。
摘要由CSDN通过智能技术生成

 flex下子元素会自动拉伸，第一个子元素image设置了100 * 100还是被后面的text过长文字挤压了。

解决：
方法1：

让图片不自动拉伸加上
flex:noe

 方法2：

flex下面所有的子元素都设置宽度，这个会比较麻烦，需要计算。

方法3：

过长的文本设置一个max-width:400rpx，这个跟上面方法2类似

Lan.W
关注
关于小程序img图片变形的问题
weixin_44204144的博客
09-03 1274
话不多说，直接先上设计图：设计图是真的很好看鸭！但是实际上长传的图片很长，导致很模糊的状态，肯定不符合要求的。 还好小程序有个mode属性： scaleToFill 缩放模式（默认属性），不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方
css flex 布局子元素撑大父元素导致页面布局错乱
缚己
05-14 1923
原因是没有给父元素设置一个固定的宽高，导致子元素 flex 的计算延伸到了父元素，给父元素设置固定的宽即可： .main { /* 之前被撑大的外部父元素 */ box-sizing: border-box; padding: 0 30px; border-right: 1px solid #ccc; width: 709px; /* 设置固定的宽 */ } .albums { /* flex 布局父元素 */ width: 98%; display: flex; flex-wr
flex 布局下 子元素图片变形问题
qwe19991123的博客
04-18 541
flex-shrink: 0; 指定了 flex 元素的收缩规则 默认值为1 不想缩放设置为0就可以了 当宽度超出时会更具flex-shrink的属性值进行计算
设置了固定宽高的图片被压缩，如何解决？
最新发布
u010609022的专栏
07-24 326
这是因为在flex容器中，当空间不够的时候，flex-shrink不为0的元素会被压缩，所以解决的方法就是给图片设置：flex-shrink:0。.existCollages .row image {通常实现如下的效果，是把外层容器设置为display:flex，容器中图片设置固定宽高度，右边元素设置为flex:1，但当右边元素宽度超出剩余空间的时候，图片会被挤压，变成椭圆形。设置了固定宽高的图片被压缩。
flex布局下img变形的问题
weixin_34290390的博客
04-12 547
flex-shrink 加上：flex-shrink：0；定义了缩小比例,默认为1,即如果空间不足,项目将会缩小所有项目为1时,空间不足,都会缩小,如果你不希望某个容器在任何时候都不被压缩，那设置flex-shrink:0;数值代表被缩小的程度!负值无效者缩小 转载于:https://www.cnblogs.com/wangmaoling/p/8807991.html...
flex布局下图片变形的解决方法
weixin_43152938的博客
03-20 1918
flex布局下图片变形的解决方法 flex布局是现在常用的一个布局方式，但是有时候也会导致出现一些小问题。本人在使用flex布局做一个左边头像，右边文字的时候，发现固定图片的宽度时，图片宽度仍然发生了变化。 下图是头像本应该是圆形的，但是被挤压变形了。 <div class="people"> <img class="avatar" src="./avatar.jpg" alt...
vue+css解决图片变形问题（flex-shrink: 0）
leng0920的博客
05-22 352
vue+css解决图片变形问题（flex-shrink: 0）
2022-11 CSS：flex布局父子宽度问题-小程序scrollView-div横向滚动字体超出隐藏-居中
weixin_49752665的博客
11-25 1779
如上图，父元素左右flex布局，右侧子元素flex布局且未设置宽度的状态下，对右侧子元素的第三行标签盒子也设置flex布局。如上图，父元素左右flex布局，右侧子元素flex布局且未设置宽度的状态下，对右侧子元素的第一行也设置flex布局。再对第一行公司名称设置flex：1，实现不设置文字宽度的超出隐藏。另：以上两种情况，右侧盒子无需设置flex：1。设置最小高度是为了，当第三行标签不存在的时候，右侧盒子高度会小于图片高度，由于父元素设置了aline-items：center，右侧盒子会居中。
微信小程序CSS布局—display:flex
Danown的博客
10-13 4142
display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 flex的六种属性 flex-direction 容器内元素的排列方向(默认横向排列) flex-direction:row 沿水平主轴让元素从左向右排列 flex-direction:column 让元素沿垂直主轴从上到下垂直排列 flex-direction:row-reverse 沿水平主轴让元素从右.
微信小程序CSS之Flex布局
代码君
10-13 4847
相信刚开始学习开发小程序的初学者一定对界面的布局很困扰，不知道怎么布局，怎么摆放位置，其原因是不了解CSS样式的属性，所以，今天代码君打算写一篇关于CSS的教程，给大家普及一下。 说起CSS布局，首先要讲解的就是FLex布局，这个可以说是一个万能钥匙，遇到什么复杂的布局，都可以通过Flex布局搞定，为了方便大家理解Flex属性，我将会一步步解析FLex的属性，并附上效果图 基本概念 采用 Flex...
display:flex 下图片变形问题
poppy995的博客
04-02 1917
今天写flex布局时发现图片设置了宽高 但是图片还是会变形 期望效果 实际效果 解决方案 在图片的css中添加 .cell-box .my-cell .cell-value .point_icon { width: 40rpx; height: 50rpx; flex-shrink: 0; // <- margin-right: 8rpx; } flex-shrink 指定了 flex 元素的收缩规则 默认值为1 不想缩放设置为0就可以了 当宽度超出时会更具flex-shr
flex写的变形效果
08-19
flex写的变形效果
flex图片浏览(带图片缩放功能)
03-31
flex单张图片浏览（可以自己修改为多图等），带缩放功能
小程序进入页面图片渲染会拉伸闪下变形，加载后显示正常的解决方案
苦夏木禾
12-28 1121
从接口传递过来的图片，本身图片大小不是固定一个比例，全部渲染显示在页面上，会有唰得拉伸从大到小快速闪下变形的bug
解决flex布局导致图片变形
热门推荐
kylin_zdd的专栏
06-11 1万+
现象最近使用dva写页面，里面使用了flex布局，结果图片被纵向拉伸变形了。2017-11-21更新：终于再次出现这个问题了，截图纪念一下： 解决方案：1.在父元素没有设置高度的情况下，可以设置图片height:100%，可以解决这个问题。 2.用div标签包裹图片，这种方案比较通用，但是会产生无用标签。如果您有任何疑问或本文侵犯了您的著作权，请联系我。mail to kylin
flex布局下img图片变形的解决方法
weixin_46020146的博客
08-07 320
flex布局下img图片变形的解决方法
uni-app如何解决微信小程序给图片设置固定宽高但发生变形的问题
shika233的博客
04-04 1万+
前端小白的uni-app艰难学习之路 问题 在开发过程中我发现，有时会遇到明明图片宽高设置的是相同的值，但在运行后图片却并没有显示出相对应的效果，反而看起来宽高非常不成比例，如以下示例： 最终效果： 可以看到，这并不是我们想要的结果，经过我反复调试，最后发现想要达到我们预期的效果（宽高相等即为正圆或正方形）也是非常简单的！ 解决 第一步： 我们需要给图片加一个父view组件（一开始我也是没有...
小程序项目之图片不变形
yan263364的博客
06-08 1012
一、问题 原图应该显示 实际上显示 图片变形了。 二、解决 我们的小程序图片规则已经定义好了宽高比例，需要运营童鞋按照比例给图。 这种情况下，image标签用mode='widthFix'属性非常合适 <image v-if="!liveInfo.promoteVideoUrl" mode='widthFix' :src="liveInfo.frontCoverUrl"></image> 三、扩展 圆角设置，不是给image设置圆角的，外面又加了一层view容器，根据ui图的
使用flex布局时，宽度超限，一行显示 ，图片缩小变形了，怎么解决？
12程序猿的博客
10-16 4057
1.问题： 在做微信小程序项目时，使用flex布局时，宽度超限时，一行显示 ，发现图片缩小变形了，在同事的帮助下解决了问题，现把解决方法记录下，以便之后查看。 2.解决方法： flex布局下的元素使用flex-shrink属性 （1）.flex-shrink具体是做什么的，请看如下介绍： 比如你设置了一个父元素400px，然后来了三个子元素，宽度分别200px。 那么加起来600px。我擦，这不脑残么？ 超了怎么办？还有得救。flex-shrink 按比例压缩。 <style> h1{font
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值