水平滚动只出现在iphone当base64图像添加

卧式滚动出现一旦我上传base64图像使用angularjs在响应HTML页面并动态地嵌入img标记。它只在iphone设备肖像模式（在景观模式下工作正常）的每个设备上工作得很好。我也使用视口来避免水平滚动。我已经尝试了几乎所有可用的CSS，包括图像上的内联CSS和它的父div，但似乎没有为我工作。水平滚动只出现在iphone当base64图像添加

body { 
 
    overflow-x: hidden; 
 
} 
 

 
.upload_image_gallery { 
 
    display: inline-block; 
 
    position: relative; 
 
    max-width: 470px; 
 
    overflow: hidden; 
 
} 
 

 
.upload_image_gallery img { 
 
    max-width: 80px; 
 
    max-height: 50px; 
 
    margin: 5px 10px 0px 0px; 
 
    border-radius: 4px; 
 
} 
 

 
.upload_image_gallery .upload_image_item { 
 
    position: relative; 
 
    margin-top: 5px; 
 
    margin-right: 12px; 
 
    float: left; 
 
} 
 

 
.upload_image_gallery i.fa-close { 
 
    color: #fff; 
 
    background: #a94442; 
 
    border-radius: 50%; 
 
    padding: 2px 3px; 
 
    font-size: 11px; 
 
    position: absolute; 
 
    right: 2px; 
 
    top: -5px; 
 
    cursor: pointer; 
 
}

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div class="upload_image_gallery"> 
 
     <div class="upload_image_item" ng-repeat='image in images'> 
 
      <i class="fa fa-close" ng-click="remove_gallery_img($index)"></i> 
 
      <img ng-show="image" ng-src="{{ image.resized.dataURL}}" /> 
 
    </div> 
 
</div>

来源

2017-03-06 Irfan Muhammad

的问题是画布大小，一旦我的图像转换为Base64水平滚动的问题解决后，画布宽度的尺寸按比例缩小至250像素。

var limit_val = 250; 
 
var cust_ratio = Math.min(limit_val/width, limit_val/height); 
 

 
if (width > height) { 
 
    if (width > limit_val) { 
 
     width = limit_val; 
 
     height = height * cust_ratio; 
 
    } 
 
} else { 
 
    if (height > limit_val) { 
 
     height = limit_val; 
 
     width = width * cust_ratio; 
 
    } 
 
} 
 

 

 
canvas.width = width; 
 
canvas.height = height; 
 

 
var ctx = canvas.getContext("2d"); 
 
ctx.drawImage(origImage, 0, 0, width, height); 
 
return canvas.toDataURL(type, quality);

中，为了得到像我不得不创建单独的功能，保留原始大小的实际大小，这样我可以把它送到API。

来源

2017-03-08 11:27:24

水平滚动只出现在iphone当base64图像添加

回答

相关问题