banner image
絕對定位放大縮小
background-image 寫法
HTML
<section id="section-top" class="position-relative">
<img src="images/banner.jpg" class="img-fluid banner" alt="Responsive image">
<!-- 手機板圖片 -->
<img src="images/banner-m.jpg" class="img-fluid banner-m" alt="Responsive image">
<div class="container">
<div class="row banner-logo position-absolute">
<div class="col-md-5 d-flex">
<a href="https://www.360d.com.tw/"><img src="images/logo.png" alt="360d" class="logo"></a>
<a href="#"><img src="images/ashita.png" class="ml-2 ml-md-5 ml-lg-5 logo" alt="明日之團"></a>
</div>
</div>
</div>
</section>
CSS
#section-top .banner {
width: 100%;
margin: 0;
padding: 0 !important;
/* max-height: 240px; */
overflow: hidden;
}
/* 手機板圖片 */
#section-top .banner-m {
display: none;
}
.banner-logo {
left: 5%;
top: 5%;
}
@media (min-width: 320px) and (max-width: 480px) {
#section-top .banner {
display: none;
}
#section-top .banner-m {
display: unset;
width: -webkit-fill-available;
}
}
父元素 加上 position: relative;
子元素 加上 position: absolute; ,可設定最大高度固定 & 外、內間距為 0 ,定義在父元素的相對位置
overflow:hidden; //自動隱藏超出的文字或圖片。
width:fill-available 表示撐滿可用空間 (寬),高度也有此特性,但不常用
background-image 寫法
&& Logo
HTML
<section id="section-banner" class="">
<div class="container">
<div class="banner-logo">
<a href="#"><img src="images/logo.png" alt="" class="logo"></a>
</div>
</div>
</section>
CSS
background-image
#section-banner {
background-image: url('../images/ECC-20-11SHRM/bg-1.jpg');
background-repeat: no-repeat;
height: 600px;
width: 100%;
padding: 10px 0 !important;
}
Logo CSS
#section-banner .banner-logo {
margin-top: 30px;
}