[CSS學習筆記] img圖片排版

2017/12/22 CSS

圖片標籤

圖片不限於容器設定的大小,圖片有多大就多大還有可能超出指定範圍,當容器設定寬為 300px 圖片的寬設定 100% 會與父容器等比例縮放,此外為了適應各瀏覽器高設定 auto 避免圖片因縮放而失真。

<div class="card">
  <img src="#">
</div>
img{
  display: block;
  width: 100%;
  height: auto;
}
.card {
  width: 300px;
  margin: 0 auto;
}

圖片上覆蓋資訊 (cover info)

在網頁設計上常常會有圖片上覆蓋資訊的設計就像以下範例,他是怎麼實現的呢?其實很簡單,最底層一張圖片另外再做一層依樣長寬的版面利用位移方式跟照片重疊覆蓋,位移方式有很多種這邊使用 position: absolute 相對位移,但是以誰為基準?網頁會自己網上找找到 body 但這不是我們要的結果所以父定位點我們定為 <div class="card"> 以他為基準,最後再將最上層版面隱藏,這邊隱藏可以利用 display: none 或是修改透明度 opacity: 0 最後利用滑鼠移動事件 :hover 再將透明度調為 1。

See the Pen CSS-image by Yi Lin Tsai (@andy6804tw) on CodePen.

程式碼

<div class="container">
  <div class="card">
    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(97).jpg" alt="">
    <div class="info">
      <button>View More</button>
      <p>Hello World!</p>
    </div>
  </div>
  
  <div class="card">
    <img src="http://farm4.staticflickr.com/3795/9269794168_3ac58fc15c_b.jpg" alt="">
    <div class="info">
      <button>View More</button>
      <p>Hello World!</p>
    </div>
  </div>
  
  <div class="card">
    <img src="https://www.taiwan.net.tw/resources/images/Attractions/0001097.jpg" alt="">
    <div class="info">
      <button>View More</button>
      <p>Hello World!</p>
    </div>
  </div>
  
</div>
body{
  background: url(http://insightreport.debeersgroup.com/_images/backgrounds/global-consumer-demand-bg.jpg);
}
.container{
  width: 900px;
  margin: 0 auto;
}
.card{
  /* 設定父親定位點 */
  position: relative;
  width: 270px;
  float:left;
  margin: 10px;
}
img{
  display: block;
  width: 100%;
  height: auto;
}
.info{
/*   display: none; */
  opacity: 0;
  position: absolute;
  box-sizing: border-box;
  background-color: rgba(0,0,0,.3);
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  padding-top: 40px;
}
.info p{
  color: #fff;
}
.info:hover{
  -webkit-transition: 500ms;
  opacity: 1;
}

Search

    Table of Contents