解决flex布局导致图片变形

最新推荐文章于 2026-05-09 10:59:35 发布

原创最新推荐文章于 2026-05-09 10:59:35 发布 · 1.4w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#flex #图片变形

本文探讨了在使用dva框架结合flex布局时遇到的图片纵向拉伸问题，并提供了两种解决方案：一是直接对图片应用height:100%样式；二是通过外层div包裹图片的方式解决。

现象

最近使用dva写页面，里面使用了flex布局，结果图片被纵向拉伸变形了。

2017-11-21更新：

终于再次出现这个问题了，截图纪念一下：
bug现象截图

解决方案：

1.在父元素没有设置高度的情况下，可以设置图片height:100%，可以解决这个问题。
2.用div标签包裹图片，这种方案比较通用，但是会产生无用标签。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

kylin_zd

关注关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

display:flex 下图片变形问题

poppy995的博客

04-02

2158

今天写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

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

LlanyW的专栏

06-24

1330

flex下子元素会自动拉伸，第一个子元素image设置了100 * 100还是被后面的text过长文字挤压了。flex下面所有的子元素都设置宽度，这个会比较麻烦，需要计算。让图片不自动拉伸加上。

参与评论您还未登录，请先登录后发表或查看评论

flex布局

热门推荐

ppx2017的博客

08-13

1万+

flex布局非常好用，但在开发过程中可能会碰到的一些坑 1、内容超出容器大致情况是：在一个设置了display:flex布局的大容器A中并排放置两个子容器，并且子容器设置flex:1，子容器中都有一个元素包含一段文本，这段文本设置了不换行并且显示省略号的样式，当文本过长的时候，子容器会被撑开，如下效果：相关代码： <view class='hot-content-box'&...

display布局下的img变形问题

qq_38134913的博客

12-25

1507

今天用display布局两个img元素的时候，发现图片自动变形了。问题如下：然而我想要的效果是：那么问题来了，为什么会变形呢？是因为flex布局的align-items属性的值默认是stretch：如果项目未设置高度或设为auto，将占满整个容器的高度。但是为什么height变得这么大，我还没有找到原因。而且，在chrome中显示是理想状态的，我是用手机测试的时候才发现图片变形的问题，然...

html img和背景图处理图片不拉伸_img固定宽度和高度，不规则图片变形问题的解决方法...

weixin_31301881的博客

01-13

3484

日常项目中，后端传图不规则，比例大小不一。前端又要去做适应，是一个让人非常头大的问题。总结了一个不规则图片不变形的解决方案：注：先写一个长 300px 宽 200px 带边框的 div ，图片接近方形，实现图片正常显示不变形。...1、背景图法通过背景图的 background-position 属性，可以使图片居中显示。国外一些网站有看到类似的案例，简单好操作。.box1{background:...

flex布局会被连串的英文撑开解决办法

weixin_38245489的博客

09-28

465

在使用flex布局的时候左边是图片，右边是文字，且flex为1 但是当文字为连串的英文的时候，flex会使得右边的图片变形这时候给右边的文字容器添加一个属性 .sub_title { word-break: break-all; } ...

使用flex布局时，宽度超限，一行显示，图片缩小变形了，怎么解决？

12程序猿的博客

10-16

4393

1.问题：在做微信小程序项目时，使用flex布局时，宽度超限时，一行显示，发现图片缩小变形了，在同事的帮助下解决了问题，现把解决方法记录下，以便之后查看。 2.解决方法： flex布局下的元素使用flex-shrink属性（1）.flex-shrink具体是做什么的，请看如下介绍：比如你设置了一个父元素400px，然后来了三个子元素，宽度分别200px。那么加起来600px。我擦，这不脑残么？超了怎么办？还有得救。flex-shrink 按比例压缩。 <style> h1{font

display:flex会造成图片失真和el-table宽度边长

枫林晚风起

01-05

1115

遇到好几次了，记录一下。flex除了会造成图片失真以外，还会造成别的，但是当时太忙，没记录就给忘了。 flex布局挺方便的，我经常用，然后就遇到了一次图片过大，移动端限制最大宽度，而且图片还是个数不一定的那种，要求一个图片，那就宽度是屏幕那么大，多个图片固定宽度，问题就来了一个图片的时候也是flex布局，限制了宽度，我当时以为这样图片就宽高适应，也不会失真，但是，这个flex就会...

css flex 图片不拉伸_详解flex布局下图片变形的解决方法

weixin_39605463的博客

12-22

2553

flex布局是现在常用的一个布局方式，但是有时候也会导致出现一些小问题。本人在使用flex布局做一个左边头像，右边文字的时候，发现固定图片的宽度时，图片宽度仍然发生了变化。下图是头像本应该是圆形的，但是被挤压变形了。Tony没错，我就是你们的Tony老师，快来找我剪头发吧！/* 父元素 */.people {display: flex;}/* 头像 */.avatar {width: 64px;h...

css flex 图片不拉伸_flex布局下img元素被拉伸变形的有效解决办法

weixin_39630247的博客

12-22

4003

在flex布局下图片被拉伸:正常的效果:一、给img元素设置flex-shrink: 0给 img 设置flex-shrink: 0;这种方式不会破坏现有的目录结构，只需要给被拉伸的img添加一个css属性。flex-shrink 的意思是将子元素宽度之和与父元素宽度的差值按照子元素 flex-shrink 的值分配给各个子元素，每个子元素原本宽度减去按比例分配的值，其剩余值为实际宽度。我们没有定...

flex布局下图片变形的解决方法

weixin_43152938的博客

03-20

2151

flex布局下图片变形的解决方法 flex布局是现在常用的一个布局方式，但是有时候也会导致出现一些小问题。本人在使用flex布局做一个左边头像，右边文字的时候，发现固定图片的宽度时，图片宽度仍然发生了变化。下图是头像本应该是圆形的，但是被挤压变形了。 <div class="people"> <img class="avatar" src="./avatar.jpg" alt...

vue+css解决图片变形问题（flex-shrink: 0）

leng0920的博客

05-22

561

vue+css解决图片变形问题（flex-shrink: 0）

解决使用flex布局引起的变形问题

New个对象喝咖啡

09-28

913

只需在变形的样式中加以下代码，禁止拉伸就ok了。

flex布局导致拉伸的问题

01-04

1210

一行CSS解决问题 flex-shrink: 0;

flex-shrink属性：解决父元素为flex布局，子元素的宽度收到挤压变形的问题

qq_41964720的博客

05-10

1271

项目需求：在每段文字的前面添加一个小圆点，方案一：使用ul-li布局，方案二：使用flex布flex-shrink属性：解决父元素为flex布局，子元素的宽度收到挤压变形的问题

flex 伸缩布局

Lily-HU

09-07

383

1、设置伸缩布局 display: flex; 2、设置固定宽度 flex-basis flex-basis: 值; 3、弹性盒子实现多行排列 flex-wrap flex-wrap : nowrap; // nowrap 默认不换行 // wrap 换行 4、设置水平方向对齐方式 justify-content justify-co...