圖片佈局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

圖片要鋪滿整個容器，可是不能變形