图片布局css

时间 2019-12-23

标签图片布局 css 栏目 CSS 繁體版

原文原文链接

本文转载于:猿2048网站图片布局cssphp

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

接下来要讲的就是对于各类图片布局的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>

效果以下：
css

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

第一种:

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

<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它可让元素基于它自己移动，并且参数能填写自身的百分百，看代码好了css3

<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;效果是同样的。代码就不贴了。
效果以下：
spa

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

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

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

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

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

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

用法:htm

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;
}

效果以下:

图片布局css

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

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

1.最简单的水平居中

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

第一种:

第二种：

垂直水平居中

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

fill

contain

cover

none

scale-down

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