记一个flex与img罕见问题

最新推荐文章于 2023-08-28 14:20:46 发布
最新推荐文章于 2023-08-28 14:20:46 发布
阅读量443 收藏
点赞数
分类专栏： JS_HTML_CSS 文章标签： flex ios h5 img缩放
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013771277/article/details/123887363
版权
在部分iOS设备上，当图片在flex容器中并设定宽度时，图片高度会变形，保持原始高度，而非等比缩放。此问题主要由Safari浏览器内核计算方式引起。解决办法包括移除flex属性或使用flex居中布局。针对苹果设备的网页设计和前端开发者，需注意此类兼容性问题。
摘要由CSDN通过智能技术生成

img在flex盒子里，img设置宽度，img高度方向变形（不能等比缩放，高度为图片原始高度）；发生在部分ios机型上；

查询资料显示safari也就是苹果系列会存在这个问题，原因由内核计算方式不一样；

去掉flex属性；

或者flex居中；

上个大学被枪毙了四年
关注
专栏目录
用flex布局使＜img＞和＜video＞元素重叠并重合显示
u013558123的博客
02-17 952
用flex布局使和元素重叠并重合显示
flex 固定一列_css实现两列固定与一列自适应的几种方法
weixin_35326667的博客
12-24 1575
本文介绍了css实现两列固定与一列自适应的几种方法，分享给大家，具体如下：1.flex布局Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。我们说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。这里我们利用flex布局来实现两列固定一列自...
img真机变形解决方法
小柒的博客
03-13 933
一、flex-shrink: 0 给 img 设置 flex-shrink: 0; flex-shrink 的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。设置为0表示不收缩。 flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。注意：如果元素不是弹性盒对象的元素，则 flex-shrin...
关于flex布局伸缩项为img时，图片不收缩显示的问题
qq_41373791的博客
11-13 1494
问题描述 今天使用flex伸缩盒布局时，伸缩容器container的宽度317px，伸缩项是两张img，宽度为181px。按理说当伸缩项宽度和大于伸缩容器时，伸缩项会收缩显示。但是实际上并非如此。 尝试的方法 我起初认为是不是还要为伸缩容器或者伸缩项设置其他属性。但是，当我将img换成div时，div却收缩显示了，此时我并没有给伸缩容器或者伸缩项添加其他伸缩相关的属性。div宽高也和img完全一样 然后，我以为div是块级显示模式，而img是行内块显示模式。于是试着将为img添加display:bl
css3 display:flex；（flex布局）+img标签在div中水平垂直居中
boy火巨的博客
11-08 2046
img标签在div中水平垂直居中--两种实现方式 第一种方式： text-align:center; vertical-align:middle; div{ text-align: center; vertical-align:middle; width: 400px; ...
Flex布局下的Img变形
荒唌Blog
07-02 605
flex-shrink: 0； 参考：flex布局下img元素被拉伸变形的有效解决办法； Example： <div class="v1 fx-btw"> <div class="avtar"> <img id="url" src="" alt="头像"> </div> <div class="name" id="name">loading...</div> </div> $a1 = 74px; ..
safari中flex布局时img宽高等比缩放自适应问题
谁说学美术将来只能卖画了，我也有自己的梦想。
12-22 1050
图片的父元素设置 align-items:center; 就好了
Flex 计算图片大小
嗜血狼恋
09-16 196
Flex中计算图片大小方式：       （1） 将图片放入Image控件中，利用控件的complete事件获取图片大小                     protected function image1_completeHandler(event:Event):void                              {                       ...
flex与bison安装包
03-29
Flex，全称Fast Lexical Analyzer Generator，是一个用于生成词法分析器的工具。它能够读取用户定义的规则文件（通常以`.l`或`.ll`为扩展名），然后自动生成C或C++代码，该代码能够识别文本中的特定模式，即词法规则...
FlexCAN详解
05-12
FlexCAN（Flexible Controller Area Network）模块是一种实现了CAN（Controller Area Network）协议的通信控制器，即遵循CAN 2.0B协议规范。FlexCAN广泛应用于需要实时处理、可靠通信和成本效益的汽车串口总线系统中...
linux下flex与bison源码安装,Win flex-bison开发环境配置
weixin_42365586的博客
05-12 2122
Flex-Bison是一套很好很方便的工具，但是主要基于Linux，对于我这种喜(懒)欢(于)使(学)用(习) Windows(Linux)的主，希望能够在windows环境中使用这套工具。所幸，国外的大佬们提供了Windows环境下可以使用的Flex-Bison套装：Win flex-bison。Win-Flex-Bison的下载页面地址：https://sourceforge.net/proj...
flex4 image 使用技巧
ASP.NET OSGI AJAX jQuery ----- 帮助别人得到他想要的，你就能得到你想要
07-21 2295
Image控件scaleContent属性：一个标志，指示是缩放内容以适应控件大小还是调整控件大小使其适应内容大小。如果为 true，则会缩放内容以 控件。如果为 false，则会缩放  控件以适应内容。此属性可用作数据绑定的源代码。AS版本: 3.0Player 版本: Fla
css flex 图片不拉伸_flex布局下img元素被拉伸变形的有效解决办法
weixin_39630247的博客
12-22 3698
在flex布局下图片被拉伸:正常的效果:一、给img元素设置flex-shrink: 0给 img 设置flex-shrink: 0;这种方式不会破坏现有的目录结构，只需要给被拉伸的img添加一个css属性。flex-shrink 的意思是将子元素宽度之和与父元素宽度的差值按照子元素 flex-shrink 的值分配给各个子元素，每个子元素原本宽度减去按比例分配的值，其剩余值为实际宽度。我们没有定...
使用flex布局图片自适应居中
最新发布
xiaoming4965的博客
08-28 307
使用flex布局图片自适应居中
flex布局中图片元素宽度确定但高度无法自适应的问题
xiongshiyuan的博客
05-12 8484
今天在使用flex布局中，为了不新增额外的dom元素，直接将img元素放在flex容器的下一层，作为一个flex项目，但是为了横向排列，所以给img元素设置了宽度，但是高度没有随着宽度变化而变化(保持高宽比),情况如下： /*html*/ ... <div class="flexBox"> <img src="image.jpg" alt="img"/> ...
flex布局中img的transform失效怎么办
cx_0104的博客
07-14 616
原因：flex布局中的元素会相对于display:flex的元素进行static定位，使transform失效解决办法：给img添加position:relative即可。
2020-09-05 html的获取所有img标签的src地址 + css的flex 1的完整写法 + JS的非行间样式获取 + 软技能的平衡点
在下魔王ii的博客
09-22 228
2020-09-03 题目来源：http://www.h-camel.com/index.html [html] 请写一个正则获取html源码中所有img标签的src地址 /// <summary> /// 取得HTML中所有图片的 URL。 /// </summary> /// <param name="sHtmlText">HTML代码</param> /// <returns>图片的URL列表</returns> publi
解决flex布局导致图片变形
热门推荐
kylin_zdd的专栏
06-11 1万+
现象最近使用dva写页面，里面使用了flex布局，结果图片被纵向拉伸变形了。2017-11-21更新：终于再次出现这个问题了，截图纪念一下： 解决方案：1.在父元素没有设置高度的情况下，可以设置图片height:100%，可以解决这个问题。 2.用div标签包裹图片，这种方案比较通用，但是会产生无用标签。如果您有任何疑问或本文侵犯了您的著作权，请联系我。mail to kylin
Flex开发常见问题与解决策略
"Flex常见问题100题涵盖了Flex开发中的各种挑战，包括配置、交互、数据类型、逻辑运算等多个方面。以下是一些关键知识点的详细解释： 1. **改变SWF输出设置**：在Flex项目属性中，通过"ActionScript Compiler"的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值