圖片置中的好方法,Image Vertical Align

外層DIV 高度與行高一致
裡面的IMG vertical-align:middle

.proudImg{margin:10px;overflow: hidden;height: 200px;line-height:200px;}
.proudImg img{vertical-align:middle;}

RWD

媒體查詢寫法

最大的畫面只到767 手機專用
@media only screen and (max-width: 767px){
}

最大的畫面只到991 平板專用
@media only screen and (max-width: 991px){
}
畫面在1200~992
@media(min-width: 768px) and (max-width: 1200px){
}

css hover 過後 圖片放大的感覺

a img{
-webkit-transition: top .8s ease-out,left .8s ease-out,opacity .8s ease-out,-webkit-transform .8s ease-out;
    -moz-transition: top .8s ease-out,left .8s ease-out,opacity .8s ease-out,-webkit-transform .8s ease-out;
    -o-transition: top .8s ease-out,left .8s ease-out,opacity .8s ease-out,-webkit-transform .8s ease-out;
    transition: top .8s ease-out,left .8s ease-out,opacity .8s ease-out,-webkit-transform .8s ease-out;
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

a:hover img{
 -ms-transform: scale(1.02);
    -webkit-transform: scale(1.02);
    -moz-transform: scale(1.02);
    -o-transform: scale(1.02);
    transform: scale(1.02);
}

http://www.erikjohanssonphoto.com/work

一些注意事項

1. img 放在DIV 裡,底部多出一段padding
Ans: img display:block

2.slidebar 好用的js  側開 上開 下開
Adam Charles Smith
 https://www.adchsm.com/slidebars/