safari浏览器中使用flex布局出现图片拉伸显示图片原始宽高

最新推荐文章于 2022-05-20 18:05:16 发布
最新推荐文章于 2022-05-20 18:05:16 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： 填坑 文章标签： css flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43587872/article/details/113104891
版权

在safari浏览器中使用flex布局出现图片拉伸的情况，一般设置图片宽度，图片高度会根据图片宽高比，高度自动伸缩进行调整。
解决方案：1，在使用了flex的情况下，设置图片定宽定高
2.去掉flex 布局，图片设为display:inline-block,宽度自定义宽度,图片间距自定义，父级设置font-size:0去除图片间距
更多方案待探索

Struggle
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css flex 图片不拉伸_CSS的flex布局看完这篇你就懂了
weixin_35715490的博客
12-31 1079
我们之前已经学过一些布局模型，比如说浮动，绝对定位等等，但是这些布局方式一是不够简洁，而是使用的范围确实是太窄了。flex模型拥有比较多的属性，来设置多样的布局方式，接下来我们就详细介绍各种属性对布局的改变，最后再对属性做一个汇总先看一下flex的基本模型，如下图所示：container父容器里有三个子元素flex-item。当给父容器设置display:flex;直接子元素就有布局模型了，上图中...
Flex中取得Image图像原始大小
小白
04-23 172
我觉得用ChangeWatcher也很简单，适用于Embed引入的图片例如： var cw:ChangeWatcher = ChangeWatcher.watch(img, "width", CompletePicLoad); //cw.unwatch(); 取消 private function CompletePicLoad(event:Event):void { ...
【笔记】flex布局，图片被纵向拉伸
窗台喝牛奶的博客
04-12 2179
【笔记】flex布局，图片被纵向拉伸 在flex布局中，图片会被默认高度拉满 解决办法： 1.给img标签设置高度heigth:100%； 2.给img加一个父标签； 3.设置img的flex-shrink:0; flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。flex-shr...
flex布局的一些图片拉伸问题
qq_40816649的博客
10-12 3717
在flex中图片会被默认高度拉满 scaleContent="true" 允许拉伸 maintainAspectRatio="false"允许改变图片的高宽比 flex-shrink: 0元素不被压缩
flex图片被默认拉伸
Qin的专栏
04-13 245
图片设置属性 flex-shrink:0;width:100%;height: 100%; flex-shrink是收缩属性，默认值是1
在Safari浏览器中使用jqxgrid导出CSV且iOS无法正常工作
04-03
在我的Web应用程序中，我可以选择将“ jqxgrid”数据导出为“ .CSV”格式。它在Chrome和Firefox... 但是，如果我在``Safari''浏览器中尝试了导出选项，它将在另一个选项卡中打开它，而不是将其作为单独的文件下载。
Android 开发 使用WebUploader解决安卓微信浏览器上传图片中遇到的bug
01-04
先给大家分析下微信浏览器上传图片bug的原因 微信在新版本中采用的是自己的X5内核浏览器，而在较老的版本中还有可能是安卓的原生浏览器。具体的环境我也不太了解，但是经过实际多台安卓机型的测试，我采取的方案可以...
iphone的safari浏览器中实现全屏浏览的方法
01-05
正常情况下，当你用手机浏览器打开网页时，导航就停留在上面，这样实际展示的屏幕就变小了。那能不能加载后，屏幕就自动全屏呢？这就是本文要讨论的。 Add to Home Screen 说到全屏不得不谈iPhone下的safari有一个...
javascript实现阻止iOS APP中的链接打开Safari浏览器
10-25
当用户在Web APP中点击一个链接，系统通常会默认使用Safari浏览器来打开外部链接，这可能破坏Web APP的整体用户体验。 描述中提到的解决方案是通过JavaScript代码来检测用户的设备环境，并在必要时阻止链接在Safari...
flex布局
sysuzhyupeng的博客
04-23 1509
一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存在 float: center 的写法，那么 text-align: center、verticle-align: middle 是否可行呢
web网站在Safari浏览器打开，图片变小
Be myself
09-12 825
web网站开发时，用的Chrome 浏览器进行调式，一切展示均正常，但在苹果手机浏览器中打开，图片变小了很多。 有人说，可以通过给img添加一个父级div，给父级div设置图片要展示的宽高，然后给img设置width为100%，高度auto。 html及css如下： <div class="img-container"> <img src="xxx.pn...
Flash:Flex背景图像实现类似于html平铺拉伸(转)+1
xv680xv
07-02 94
　　在Flex中如果要实现像Html一样的平铺拉伸可能需要自己重写skin组件，默认的flex组件不支持背景图像的平铺功能。以下我是写的一个有关panenl容器的的skin，如果要写canva，Hbox，Application等等的话只需要在原有的基础上稍做修改就可以了，这个组件实现了Html背景平铺拉伸的所有功能，而且可以通过css样式进行设置。以下是源代码，希望对需要的人有所帮助，如不明白...
css flex 图片不拉伸_flex布局下img元素被拉伸变形的有效解决办法
weixin_39630247的博客
12-22 3627
在flex布局下图片被拉伸:正常的效果:一、给img元素设置flex-shrink: 0给 img 设置flex-shrink: 0;这种方式不会破坏现有的目录结构，只需要给被拉伸的img添加一个css属性。flex-shrink 的意思是将子元素宽度之和与父元素宽度的差值按照子元素 flex-shrink 的值分配给各个子元素，每个子元素原本宽度减去按比例分配的值，其剩余值为实际宽度。我们没有定...
CSS3设置flex，图片的高度被自适应了
qq_53066188的博客
05-20 1000
如图所示,因为给最内存的图片宽度设置了width:100%，会寻找上一级的高度，上一级没设置会自动寻找父元素,父元素的宽度为整个页面,所以img宽度为父元素宽度的6分之一,自然高度也会自适应变小了,设置width：600自然就能恢复高度了 ...
flex 实现图片放大缩小恢复组件
siejls的专栏
01-14 1802
1.使用方法     a.在页面引用自定义组件的包 xmlns:myzoom="zoomPackage.*"     b.在页面添加自定义组件，并指定要缩放的对象 2.组件源码     /FlexAppToJava/flex_src/zoomPackage/ZoomPackage.mxml <s:Group xmlns:fx="http://ns
safari中flex布局时img宽高等比缩放自适应问题
谁说学美术将来只能卖画了，我也有自己的梦想。
12-22 1001
图片的父元素设置 align-items:center; 就好了
display:flex会造成图片失真和el-table宽度边长
枫林晚风起
01-05 948
遇到好几次了，记录一下。flex除了会造成图片失真以外，还会造成别的，但是当时太忙，没记录就给忘了。 flex布局挺方便的，我经常用，然后就遇到了一次图片过大，移动端限制最大宽度，而且图片还是个数不一定的那种，要求一个图片，那就宽度是屏幕那么大，多个图片固定宽度，问题就来了 一个图片的时候也是flex布局，限制了宽度，我当时以为这样图片就宽高适应，也不会失真，但是，这个flex就会...
解决flex布局导致图片变形
热门推荐
kylin_zdd的专栏
06-11 1万+
现象最近使用dva写页面，里面使用了flex布局，结果图片被纵向拉伸变形了。2017-11-21更新：终于再次出现这个问题了，截图纪念一下： 解决方案：1.在父元素没有设置高度的情况下，可以设置图片height:100%，可以解决这个问题。 2.用div标签包裹图片，这种方案比较通用，但是会产生无用标签。如果您有任何疑问或本文侵犯了您的著作权，请联系我。mail to kylin
html中图片保持原比例自适应div大小
一条吃软饭的软狗
11-06 9253
自适应+居中代码 <div style="width:500px;height:500px;display:flex;justify-content:center;align-items:center"> <img src="2.jpg" style="width:100%;height:auto"> </div> 效果图（ps：原图是长方形的，div盒...
-webkit-line-clamp如何在safari浏览器中使用
最新发布
06-13
在Safari浏览器中，可以使用以下CSS代码来实现-webkit-line-clamp： ``` display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; ``` 其中-webkit-box-orient设置为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值