1010Code

[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;
}
鼓勵持續創作，支持化讚為賞！透過下方的 Like 拍手👏，讓創作者獲得額外收入~
版主10在2020年首次開設YouTube頻道，嘗試拍攝程式教學。想要了解更多的朋友歡迎關注我的頻道，您的訂閱就是最大的支持～如果想學其他什麼內容也歡迎許願XD
https://www.youtube.com/channel/UCSNPCGvMYEV-yIXAVt3FA5A

Search

    Table of Contents