加载图片后自动居中
程序员文章站
2024-02-26 17:11:04
...
因为加载图片可能有延迟，这是我用过的复用率最高的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="myButton.css">
<script src="../../jquery.min.js"></script>
<style>
</style>
</head>
<body >
<div id="root" style="position: relative; height:700px;width: 1000px;background-color:red;">
<div id="viewer" style="width: 100%; height: 100%; overflow: hidden; position: absolute;">
<div id="canvas" style="position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px;">
<div id="container" style="position: absolute; transform: scale(1);">
<img id='img' src="./image/1.jpg" style="position: absolute;width: auto; height: auto; display: block;"/>
</div>
</div>
</div>
</div>
</body>
<script>
$('#img').on('load',function(){
//图片宽、高
var imgWidth = $(this).width();
var imgHeight = $(this).height();
console.log(imgWidth+'--'+imgHeight);
// 外部区域的宽高
var outerWidth = $('#root').width();
var outerHeight = $('#root').height();
console.log(outerWidth+'--'+outerHeight);
// 计算后居中的位置
var left = (outerWidth-imgWidth)/2;
var top = (outerHeight-imgHeight)/2;
$('#container').css({
top : top+'px',
left : left+'px'
});
});
</script>
</html>需要jquery和一个图片。我就不贴了，效果如图：
推荐阅读
-
加载图片后自动居中
-
[WPF自定义控件库] 让Form在加载后自动获得焦点
-
php上传图片后，自动裁剪成缩略图，宽不限高_PHP教程
-
php上传图片后，自动裁剪成缩略图，宽不限高_PHP教程
-
javascript图片自动缩放和垂直居中处理函数_图象特效
-
使用async await通过for循环在图片onload加载成功后获取成功的图片地址
-
Android圆形头像拍照后“无法加载此图片”的问题解决方法（适配Android7.0）
-
Android圆形头像拍照后“无法加载此图片”的问题解决方法（适配Android7.0）
-
Android编程实现图片的浏览、缩放、拖动和自动居中效果
-
Android编程实现图片的浏览、缩放、拖动和自动居中效果