Image

圖片有兩種呈現方式,看用途決定使用哪一種

如果是內容的話用 inline

<img src="inline.png" alt="inline" />

如果是版面的話用 background-image

<a href="#" class="logo">LOGO!!!!!!</a>
.logo {
background: url(background.png);
text-indent: -9999px;
}

這邊在HTML內打入LOGO上的文字然後用 text-indent 把字調消失這樣有助於 HTML 維護
——————-

* 來源圖片的長寬可能不是我們想要的,這時候就需要在父元素設定長寬來剪裁

.crop { width: 400px; height: 300px; }

這樣的處理方式長寬會被壓縮,比例會改變,視覺上可能會很怪
解決辦法是把超過的地方設成隱藏

.crop { 
width: 400px;
height: 300px; 
overflow: hidden;
}

這樣的話下面或右邊超過的部分就會被剪裁掉了
但是我們想要圖片稍微中間的部分怎麼辦?

可以在圖片長寬加上 auto 屬性
/* 寬度置中*/

.crop img {
width: 400px;
height: auto;
}

/* 長度置中*/

.crop img {
width: auto;
height: 300px;
}

這跟一般要讓元素置中調整的

margin: 0 auto;

有異曲同工之妙

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s