AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【笔记】h5页面img标签变形，无法完美适配

2023-01-10 249 发布于北京
版权
举报
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： h5页面img标签变形，无法完美适配

一、问题

h5活动页面中经常会用到一些超长的大图，一般两个方案：

  • 有内容的使用background-image
  • 没有内容的直接使用img

问题来了，直接img标签，图片变形，垂直拉伸了。。。

二、解决

img标签外单独套一个div就好了。。。原因未知。。。

知道原因的欢迎留言

over

文章标签：
移动开发
程序边界
+关注
62文章
目录
打赏
0
0
0
0
305
分享
相关文章
帅气的阿辉
|
9月前
Elementui-Image组件，单个图片点击放大展示
Elementui-Image组件，单个图片点击放大展示
帅气的阿辉
322 2
你挚爱的强哥
|
10月前
|
索引
【sgPhotoPlayer】自定义组件：图片预览，支持点击放大、缩小、旋转图片
【sgPhotoPlayer】自定义组件：图片预览，支持点击放大、缩小、旋转图片
你挚爱的强哥
84 1
凉冰Pro
|
前端开发
css之图片下方定位遮掩层
css之图片下方定位遮掩层
凉冰Pro
130 0
卡尔特斯
|
小程序 JavaScript
微信小程序 - image 宽高自适应(图片无法自适应撑开标签)
微信小程序 - image 宽高自适应(图片无法自适应撑开标签)
卡尔特斯
783 0
漏刻有时
Echarts实战案例代码(45)：拼接屏字体自适应的解决方案
Echarts实战案例代码(45)：拼接屏字体自适应的解决方案
漏刻有时
84 0
漏刻有时
|
定位技术
百度标注地图markers图片icon不正常显示的样式冲突解决方案
百度标注地图markers图片icon不正常显示的样式冲突解决方案
漏刻有时
246 0
yanyan0918-20704
|
小程序 容器
【微信小程序】image组件的4种缩放模式与9种裁剪模式
假设有一个容器（这个容器的宽高就是设置的样式），要将图片放进去。而aspectFit的特点就是保持图片不变形，且容器要“刚好”将这个图片装进去。如果原始图片比容器大，就要被等比例缩小；如果原始图片比容器小，就会被等比例放大。一直放大或缩小到图片的某一条边刚好和容器的一条边重合。
yanyan0918-20704
1521 0
程序边界
|
移动开发 前端开发 小程序
【笔记】纯css实现列表水平滑动（图片或文字内容不限）
纯css实现列表水平滑动（图片或文字内容不限）
程序边界
347 0
清雨小竹
ckeditor 3.6.2版本，设置图片上传后自适应宽高。
ckeditor 3.6.2版本，设置图片上传后自适应宽高。
清雨小竹
195 0
码农技术君
|
移动开发 JavaScript HTML5
JS获取img图片的原始尺寸高度和宽度
JS获取img图片的原始尺寸高度和宽度
码农技术君
603 0
JS获取img图片的原始尺寸高度和宽度

热门文章

最新文章

  • 1
    Mac 上 iterm2 和 VSCode 终端中的字体设置建议
    4789
  • 2
    从零开始做逆变器系列 ( 二 ): 单极性、双极性、单极性倍频SPWM
    218
  • 3
    信用算力基于 RocketMQ 实现金融级数据服务的实践
    8880
  • 4
    ubuntu如何实现访问实际网络中windows共享文件夹
    6345
  • 5
    springboot之使用redistemplate优雅地操作redis
    4186
  • 6
    阿里云服务器价格表2022更新（多CPU内存配置报价）
    12
  • 7
    向AI医疗再次进军，DeepMind利用人工智能预测急性肾损伤
    788
  • 8
    蒙特卡罗方法 python 实现2
    549
  • 9
    [ASP.NET]国外的几款菜单似的导航栏
    543
  • 10
    mm_struct
    514
  • 1
    基于模糊PID控制的六步逆变器供电无刷直流电机调速simulink仿真
    24
  • 2
    使用 Python 合并微信与支付宝账单，生成财务报告
    21
  • 3
    泵浦光与斯托克斯光相遇耦合效应的matlab模拟与仿真
    23
  • 4
    一、MyBatis简介：MyBatis历史、MyBatis特性、和其它持久化层技术对比、Mybatis下载依赖包流程
    97
  • 5
    《DeepSeek成本“瘦身”秘籍：云原生技术全解析》
    38
  • 6
    《DeepSeek牵手云原生，流量管理玩出新高度》
    32
  • 7
    《DeepSeek借云原生容器化，解锁产品迭代新速度》
    33
  • 8
    《云原生技术：DeepSeek分布式推理的效能倍增器》
    28
  • 9
    《深度解析DeepSeek-M8：量子经典融合，重塑计算能效格局》
    35
  • 10
    JVM简介—2.垃圾回收器和内存分配策略
    32

    • 相关电子书

    更多
  • 复杂环境下的视觉同时定位与地图构建
  • Understa...[【方向】].1499510001.pdf
  • Differen...[【方向】].1492015837.pdf
    • 下一篇
    通义万相2.1视频/图像模型新升级！可在阿里云百炼直接体验
    目录