整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

「CSS」图片实现上下居中、左右居中的另类实现方法

「CSS」图片实现上下居中、左右居中的另类实现方法

制作网页的很多时候为了页面美观都需要图片能够做到上下居中、左右居中。网上现实的方式方法也有很多,这里分享我经常使用的一种方法。

实现方法

// HTML代码
<div class="row">
          <div class="col-xs-3">
                    <img src="/public/empty_200x100.png" class="imgbg" style="background-image:url('/uploads/demo.jpg');">
          </div>
</div>

// CSS 代码
<style type="text/css">
          .imgbg{
                    width:100%; 
                    background-color: #ebf2f9; 
                    background-position: center; 
                    background-size:contain; 
                    background-repeat: no-repeat;
          }
</style>

实现原理

1、先准备一张透明的png图片。

2、对这个图片定义一个 Css样式,添加这几个属性:

background-position: center;背景图片居中

background-size: contain;显示完整背景图片

background-repeat: no-repeat;背景图不重复

3、然后把要显示的图片作为背景图片。

这样图片就不会随着尺寸不同错位显示。展示的时候如果需要显示正方形图片,只需要制作一个1x1比例的png图片,另外可以根据自己的要求制作png图片。

升级处理

在展示图片的时候,可能有些小伙伴不喜欢把图片放到style样式里面,可能会感觉到看起来怪怪的。

style="background-image: url('/uploads/demo.jpg');

我们想要的可能是这样的展示方式

<img src="/public/empty_200x100.png" data-src="/uploads/demo.jpg" class="imgbg">

这样其实也简单,我们可以借助于 jquery 来实现这个功能。代码如下:

<script type="text/javascript">
$(document).ready(function() {
          $("[class='imgbg']").each(function(index, el) {
                    $(this).css('background-image', 'url(' + $(this).data('src') + ')');
          });
});
</script>

PHP 实现

PHP 实现生成图片也分为二种

1、图片上传的时候,按后台设置的尺寸生成。

2、图片预览的时候,按URL中设置的参数生成。

github地址

https://github.com/zjutsxj/autoCropImage

过前端开发的朋友都知道,要使文字在一个div容器垂直居中显示是很简单的事,但是如果是要让一张图片在div容器中垂直显示那就有点伤脑筋了,因为图片是个置换元素,有些特殊的特性,对于前端开发的大牛来说还好,解决方法有很多,比如什么利用js啊之类的,但是这些对于初学者来说就有些难度了,今天小编就把自己平时在项目中用的方法分享给大家,给大家一个参考。

其实小编用的方法也不是什么很高端的技术,算是最low的方法吧,但是很实用,能兼容各种浏览器,为了演示,小编直接从某宝商家店铺里拿了一张商品图来做演示,因为商品图都是高清无码的,且还很大,所以我们在CSS中把图片的高度设置为200px,div容器的高度为300px,完整的代码如下:

最终的运行效果如下图:

可以看到,这个图片在div中水平、垂直都是在正中间,是不是很完美。这个原理也很简单,就是在div容器中加了个 <i> 标签并把它的 display 属性设置为 inline-block(行内块元素),让它去撑开div容器的高度,再把图片的 vertical-align 属性设置为 middle 就可以垂直居中了,当然这只是个演示,大家在实际的项目中可以利用 max-width、min-width、max-height、min-height 等属性让图片根据需要自适应,以达到想要的效果。

当然解决方法还有很多种,具体用什么方法需根据自身页面布局去权衡,总之没有最好的,只有最适合的,如果你有更好的方法也可以告诉小编哦,一起交流方法,共同进步。

lexbox

通常首选方法是使用flexbox居中内容。只需三行代码即可:display:flex,然后使用 align-items:center justify-content:center 将子元素垂直和水平居中。

如下代码:

html:

<div class="flexbox-centering">
  <div>Centered content.</div>
</div>

css:

.flexbox-centering {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

Grid

使用grid(网格)与flexbox非常相似,也是一种常见的技术,尤其是布局中已经使用网格的情况下。与前一种flexbox技术的唯一区别是它显示为栅格。

如下代码:

html:

<div class="grid-centering">
  <div class="child">Centered content.</div>
</div>

css: