BS3 Images
簡介
在一個自適應式 (Responsive Web Design) 的網頁中，要讓不同大小的相片、圖片隨著螢幕的大小調整，也是一件很鎖碎的事情。在 BS3 中提供了一個 CSS 的基礎類別 .img-responsive 來處理這件事，它能將較大的相片或圖片隨著螢幕大小的變更而調整。但只能將大相片或圖片隨螢幕縮小，卻不能將小相片或圖片放得比原尺寸大。當 <img> 的 CSS 類別設定為 .img-responsive 時，因為 max-width 的屬性值設為 100%，所相片或圖片的寬度其容器內容 (content) 的寬度一致，height 屬性值設為 auto，因此高度會自行調整，以保有原相片或圖片的寬高比。若要將相片或圖片左右置中時，可再加修飾類別 .center-block； 常容器的寬度大於相片或圖片的原始寬度時，相片或圖片便會左右置中了。
修飾類別有
- .img-rounded （相片或圖片的四角形成圓角）
- .img-circle （相片或圖片依寬、高比，修飾成圓形或楕圓形；寬高比為 1:1 時為圓形）
- .img-thumbnail （具有 1px 的淺灰色邊框，週邊有 4px 的留白，四角為圓角）
以下為 BS3 v3.3.6 的 Bootstrap.css 樣式表中，有關 .img-responsive 及其相關之 CSS 修飾類別的定義。
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
max-width: 100%;
height: auto;
}
.img-rounded {
border-radius: 6px;
}
.img-thumbnail {
display: inline-block;
max-width: 100%;
height: auto;
padding: 4px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.img-circle {
border-radius: 50%;
}
範例
範例中用同一張相片展示了 .img-responsive 的預設外觀，及使用其它三種不同修飾類別後，所得到的外觀。
CSS
<style>
html {
width:100%;
height:100%;
}
body {
margin: 0 auto;
max-width: 1000px;
padding: 20px;
}
.imageBox {
margin:10px;
width:300px;
height:auto;
background: #99ccff;
float:left;
}
h5 {
text-align: center;
}
</style>
.imageBox{} 設定了 <img> 的容器寬度為 300px，比 BS3 中 extra small 的寬度 (480px) 還小；這是為了要把各種修飾類別都能顯示在螢幕上，但在縮小螢幕時，就看不出相片會更著一齊縮小了，這張相片原始尺寸為 1024px x 768px。只要把寬度值改大，至少大於 480px，就可以看出縮放的效果了。設定 background-color，在 .img-thumbnail 的範例中，可以看到週邊的留白。
HTML
<body>
img-responsive
img-responsive img-rounded
img-responsive img-circle
img-responsive img-thumbnail
</body>
沒有留言:
張貼留言