图片布局css

423 0 0

作者:Mr.su

对于平时项目开发中，经常要展示图片。什么水平居中显示，垂直居中显示，水平或垂直居中显示...我们的发际线就是这样往后退的。

接下来要讲的就是对于各种图片布局的css实现（这里针对的是img标签的不会使用到background）

1.最简单的水平居中

  <style>
    .exa1{
      width: 500px;
      height: 300px;
      margin: 0 auto;
      border: 1px solid #f00;
    }
    .exa1 img {
      display: block;
      width: 300px;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <h5>1.水平居中</h5>
  <div class="exa1">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513482866&di=b7de9d07063752ad42c09826014e5a8d&imgtype=jpg&er=1&src=http%3A%2F%2Fpic1.5442.com%2F2015%2F0305%2F07%2F001.jpg" alt="">
  </div>
</body>
</html>

效果如下：
水平居中

2.垂直居中(这里介绍两种)

第一种:

在图片父元素添加一个伪类before，利用vertical-align: middle的特性让图片垂直居中，不过感觉不是很方便

<style>
    .exa2{
        width: 500px;
        height: 300px;
        margin: 0 auto;
        border: 1px solid #f00;
    }
    .exa2::before{
        content: "";
        display: inline-block;
        height: 300px;
        vertical-align: middle;
    }
    .exa2 img {
        width: 300px;
        vertical-align: middle;
    }
</style>

<div class="exa2">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513482866&di=b7de9d07063752ad42c09826014e5a8d&imgtype=jpg&er=1&src=http%3A%2F%2Fpic1.5442.com%2F2015%2F0305%2F07%2F001.jpg" alt="">
  </div>

第二种：

我比较推荐第二种使用css3的新属性，不要跟我说兼容，我不管。。。。
这里主要用到transform的translateY它可以让元素基于它本身移动，而且参数能填写自身的百分百，看代码好了

<style>
    .exa2{
        width: 500px;
        height: 300px;
        margin: 0 auto;
        border: 1px solid #f00;
    }
    .exa2 img {
        position: relative;         // 这里通过定位，也可以选择用absolute，看自己需要移动相对容器50%，在向上移动自身的50%，就达到垂直居中的效果了
        top: 50%;
        transform: translateY(-50%);
    }
</style>

<div class="exa2">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513482866&di=b7de9d07063752ad42c09826014e5a8d&imgtype=jpg&er=1&src=http%3A%2F%2Fpic1.5442.com%2F2015%2F0305%2F07%2F001.jpg" alt="">
  </div>

效果如下：
垂直居中

垂直水平居中

这个我想通过上面说的应该也能猜到怎么实现了

.exa2 img {
      width: 300px;
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }

就是加个left和translateX，其它都一样，如果要用垂直居中的第一种方法在父元素增加text-alegn:center;效果是一样的。代码就不贴了。
效果如下：
垂直水平居中

ps: 上面说到都是图片在位置上的转换，其实还有一种更简单的方法，就是object-position属性，用这个轻松简单快捷搞定所有你要的布局，可是它有一个之名缺点就是，IE下全方位不支持。如果不用兼容IE的建议直接怼这个。

用法：
object-position：value， value;
value可以是'center', 'left', 'bottom', 'right'或者是百分百，px；

图片自适应宽度或高度100%

可能项目中会有这种情况，容器大小是固定的，可是图片的尺寸确不同的。
这里就可以用到object-fit了在通过垂直水平居中就可以达到很好的效果了（同样这里也是不兼容大IE的）。下面是object-fit的值：

fill
被替换的内容的大小，以填补该元素的内容框：对象的具体对象的大小是元素的使用宽度和高度。

contain
被替换的内容的大小，为自身宽高比不变，适应该元素的内容框的大小：它的具体对象的大小被解析为对元素的使用宽度和高度的含有约束。
cover
被替换的内容的尺寸却使元件的整个内容框，以保持其长宽比其具体的对象的大小被解析为针对元素的使用的宽度和高度的盖约束。
none
被替换的内容的尺寸却使元件的整个内容框，以保持其长宽比其具体的对象的大小被解析为针对元素的使用的宽度和高度的盖约束。
scale-down
内容的尺寸仿佛none或contain指定了，取将导致更小的具体对象的大小。

用法:

img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

如果想要兼容性好点可以用下面的方法，不过缺点就是图片的自身尺寸要比容器大才行：

  <style>
    .exa1{
      width: 500px;
      height: 400px;
      margin: 0 auto;
      border: 1px solid #f00;
    }
    .exa1 img {
      display: block;
      max-width: 100%;
      max-height: 100%;
      position: relative;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <h5>图片自适应宽度或高度100%</h5>
  <div class="exa1">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513482866&di=b7de9d07063752ad42c09826014e5a8d&imgtype=jpg&er=1&src=http%3A%2F%2Fpic1.5442.com%2F2015%2F0305%2F07%2F001.jpg" alt="">
  </div>

</body>
</html>

效果图如下：

图片要铺满整个容器，但是不能变形

这里只能用到object-fit的cover；不过有兼容性问题。

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

效果如下:

内容来源于网络如有侵权请私信删除

标签： HTML CSS HTML5 CSS3

你还没有登录，请先登录或注册！

还没有人评论，欢迎说说您的想法！

图片布局css