ครอปรูปภาพ thumbnails ตรงกลางภาพ ด้วย css
6 เม.ย. 2016 , 6,066 Views , หมวดหมู่ WebDesign ทุกหมวดหมู่ โค๊ดดิ้ง , ป้ายกำกับ:css, thumbnails
บางครั้งในการแสดง thumbnails ของรูปภาพหากรูปภาพมีขนาดไม่เท่ากันหรือบางภาพเป็นแนวตั้ง บางภาพเป็นแนวนอน ทำให้การแสดงภาพ thumbnails ไม่สวย CSS ด้านล่างนี้ช่วยได้ครับ
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.thumbnail { position: relative; width: 200px; height: 200px; overflow: hidden; } .thumbnail img { position: absolute; left: 50%; top: 50%; height: 100%; width: auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .thumbnail img.portrait { width: 100%; height: auto; } |
ตัวอย่างการใช้งาน
|
1 2 3 4 5 6 |
<div class="thumbnail"> <img src="landscape-img.jpg" alt="Image" /> </div> <div class="thumbnail"> <img src="portrait-img.jpg" class="portrait" alt="Image" /> </div> |
ดูเพิ่มเติม : http://jonathannicol.com/blog/2014/06/16/centre-crop-thumbnails-with-css/
ป้ายกำกับ:css, thumbnails
