css图片自适应div大小-[CSS]实现图片垂直居中和左右居中的另一种方式

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

很多时候在制作网页的时候，为了页面的美观css图片自适应div大小，都需要图片，这样才能做到上下居中、左右居中。 在线现实也有很多正式的技巧，这里是我经常使用的一个技巧。

实现方法

// HTML代码

          

                    
          

// CSS 代码

          .imgbg{
                    width:100%; 
                    background-color: #ebf2f9; 
                    background-position: center; 
                    background-size:contain; 
                    background-repeat: no-repeat;
          }

实现原理

1.首先准备一张透明png图片。

2.为这张图片定义一个Css样式并添加以下属性：

背景位置：中心； 背景图像居中

背景大小：包含； 显示完整的背景图像

背景重复：不重复； 背景图像不重复

3.然后使用要显示的图片作为背景图片。

这样就不会根据规格的不同而出现画面错位的情况。 如果显示时需要显示方形图片css图片自适应div大小，只需制作1x1比例的png图片即可，也可以根据自己的要求制作png图片。

升级流程

在展示图片的时候，有些朋友可能不喜欢在样式上放图片，可能会觉得看起来怪怪的。

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