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%);

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

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

欢迎大家关注公众号：