在切相簿功能時，有時候會遇到都出來的圖片大小不一的情形，一般處理的方式就是縮小至某一尺寸後擷取固定的大小，超出尺寸的裁掉；或者是破壞圖片的比例，將長寬壓縮至該尺寸（這樣真的很醜）。如果客戶不希望裁切圖片，而設計師又無法忍受變形的圖片時，真的很令人苦惱。 以下就是既可以保持圖片原有比例，又不用裁切圖片的兩種方法，前提是這兩種方法圖片外都必須包著容器。

ㄧ：利用:after設定百分比

先設定容器為position:relative以及容器的:after為display: block，
再計算所需設定的圖片長寬比-(高/寬)*100。
常用比例如下:

圖片比	1:1	4:3	16:9
padding-top數值	100%	75%	56.25%

.boxtag {
    width: W;/*容器寬*/
    height: H;/*容器高*/
    position:relative;
    overflow:hidden;
}
.boxtag:after {
    padding-top: X%;/*設定寬比高的比例，X=(H/W)*100*/
    content:"";
    display: block;
}
.boxtag img {
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    max-width:100%;
    max-height:H;/*圖片高度不可超過容器高度*/
    margin:auto;
}

提醒，此方法的圖片高度不可超過容器高度!!!

二：利用line-height及vertical-align

先設定容器的長與寬，並設定容器的line-height與容器高相同
將容器內容設為水平置中text-align: center，容器內的圖片為垂直置中vertical-align:middle

.boxtag {
  width: W;/*容器寬*/
  height: H;/*容器高*/
  line-height:H;/*line-height等同容器高度*/
  text-align: center;/*設定圖片水平置中*/
  overflow:hidden;
}
.boxtag img {
  max-width: W;
  max-height: H;
  vertical-align:middle;/*設定圖片垂直置中*/
}

範例如下

...

Continue Reading

設定換行

white-space: nowrap

white-space	normal預設 / nowrap不換行 / pre保留空白 / pre-line / pre-wrap / initial / inherit

詳細說明－英文https://www.w3schools.com/cssref/pr_text_white-space.asp
詳細說明http://www.w3school.com.cn/cssref/pr_text_white-space.asp
瀏覽器支援http://caniuse.com/#search=white-space
...

Continue Reading

<fieldset> 和 <legend> 這兩個tag 大家可能比較陌生，他們都是屬於 form 標籤組， 也就是要放在 <form> 裡面，用來加強form的結構性，用意是將過長的表單"群組"。 ...

Continue Reading

text-align	left / right / center / justify / initial / inherit

text-align可被繼承並只對block元素有效 詳細請見 https://www.w3schools.com/cssref/pr_text_text-align.asp

文字左右對齊如果依照參考書上的寫法是 text-align:justify;
但是CSS是外國人發明的，因此此用法只對英文管用 ...

Continue Reading