WEB-移动端图片适配-弹框

前端朋友们应该遇到过很多图片弹框适配的问题，我自己总结了两种办法：

第一种是使用background

（1）使用百分比

width: 90%;height: 80%;max-width: 538px;max-height: 813px;margin: 0 auto;position: absolute;    top: 50%;left: 50%;transform: translate(-50%, -50%);background:url(./content.png);  filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";  -moz-background-size:100% 100%;  background-size:100% 100%;

弊端：使用过程中发现有时候图片会出现拉伸导致失真，此种方法我目前高度智能限定宽度使用百分比所以很容易导致图片拉伸失真。（如果朋友们能解决这个办法欢迎留言帮忙完善）

（2）使用固定值

 width: 285px;height: 430px;max-width: 538px;max-height: 813px;margin: 0 auto;background: url(./content.png) no-repeat;background-size: 100% 100%;position: absolute;    top: 50%;left: 50%;transform: translate(-50%, -50%);

弊端：在合适的屏幕可能看着比较舒服，但是大屏幕的话就会显得图片比较小，因为已经严格限定死了图片的大小，所以不能说成是自适应。（如果朋友们能解决这个办法欢迎留言帮忙完善）

第二种：img标签

<img class="abtn" src="./content.png"  alt="" srcset="">

 width: 90%;max-width: 538px;margin: 0 auto;position: absolute;    top: 50%;left: 50%;transform: translate(-50%, -50%);

注意：目前来看这种方式还是可以满足目前我所开发的需求。

如果大家有更好的办法欢迎大家留言，大家一起学习一起完善。

欢迎大家关注公众号：

WEB-移动端图片适配-弹框相关推荐

vue手机端回退_vue移动端弹框组件，vue-layer-mobile
最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的 ...
vue弹出alert_Vue实现移动端 message-box 与 alert 弹框@郝晨光
GIF.gif 前言最近在做移动端的项目,需要制作移动端的alert弹框和message-box提示信息:之前使用Vue框架的element-ui时,就记得element-ui的弹框,今天深入的研究 ...
Skyline WEB端开发3——添加一个弹框
相对于之前的功能而言,弹出弹框就比较容易了,在skyline中有提供Window, 包含所有与三维窗口互动的相关功能. 创建弹窗的方法 Creator.CreatePopupMessage Creat ...
移动端布局三种视口_移动H5的meta视口标签、弹性布局原则和背景图片适配
很多小伙伴对viewport的理解不是很透彻,于是这一篇重点聊聊viewport(视图)的知识点.以帮助大家更加容易理解移动端H5页面的适配方案. 解读移动H5适配最重要的html标签:meta视口标 ...
一个常用的自定义弹框封装(适配 AndroidX),加载 ProgressDialog,状态显示的 StatusDialog 和自定义 Toast,全部支持背景颜色,圆角,边框和文字的自定义,构建者模
MNProgressHUD 项目地址:maning0303/MNProgressHUD 简介: 一个常用的自定义弹框封装(适配 AndroidX),加载 ProgressDialog,状态显示的 S ...
轻松掌握移动端web开发【尺寸适配】常用解决方案
本文主要针对初学移动端web开发的读者,笔者也是初学者,文中有众多用词不当之处望读者指正. 前言从开始做web app开发到现在,一直对移动端的尺寸适配有一种模糊的概念.能说得上来'媒体查询','栅 ...
移动端下弹框禁止背景滑动
移动端下弹框禁止背景滑动茴字写法有很多种,找到最适合的才是好的. 以下下方法在一屛之内是可行的 body;html 设置overflow:hidden .overflow-hidden{height ...
移动端（H5）弹框组件--简单--实用--不依赖jQuery
俗话说的好,框架是服务与大家的,包含的功能比较多,代码多.在现在追求速度的年代.应该根据自己的需求去封装自己所需要的组件. 下边就给大家介绍一下自己封装的一个小弹框组件,不依赖与jQuery,代码少, ...
移动端页面键盘弹出后导致body高度变低背景图片被挤上去解决方法
移动端页面键盘弹出后导致body高度变低背景图片被挤上去解决方法本身在设置背景图片的时候是将html,body的高度设为100%,然后 .main{height: 100%;background: ...

WEB-移动端图片适配-弹框

WEB-移动端图片适配-弹框相关推荐

最新文章

热门文章