在制作网页的很多时候为了页面美观都需要图片能够做到上下居中、左右居中。网上现实的方式方法也有很多html怎么让图片居中，这里分享我经常使用的一种方法。
实现方法
// HTML代码
// CSS 代码
.imgbg{
width:100%;
background-color: #ebf2f9;
background-position: center;
background-size:contain;
background-repeat: no-repeat;
}
实现原理
1、先准备一张透明的png图片。
2、对这个图片定义一个 Css样式兼职赚钱，添加这几个属性：
background-position: center；背景图片居中
background-size: contain；显示完整背景图片
background-repeat: no-repeat；背景图不重复
3、然后把要显示的图片作为背景图片。
这样图片就不会随着尺寸不同错位显示。展示的时候如果需要显示正方形图片，只需要制作一个1×1比例的png图片，另外可以根据自己的要求制作png图片。
升级处理
在展示图片的时候，可能有些小伙伴不喜欢把图片放到style样式里面html怎么让图片居中，可能会感觉到看起来怪怪的。
style="background-image: url('/uploads/demo.jpg');我们想要的可能是这样的展示方式
这样其实也简单，我们可以借助于 jquery 来实现这个功能。代码如下：
$(document).ready(function() {
$("[class='imgbg']").each(function(index, el) {
$(this).css('background-image', 'url(' + $(this).data('src') + ')');
});
});
PHP 实现
PHP 实现生成图片也分为二种
1、图片上传的时候，按后台设置的尺寸生成。
2、图片预览的时候，按URL中设置的参数生成。
github地址
https://github.com/zjutsxj/autoCropImage声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
