Loading post navigation ...
 
 

Pro page

16
Nhận xét

Tạo thumbnail cho ảnh với CSS

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Thông thường khi muốn tạo ảnh thumbnail ta thường dùng cách bóp ảnh lại bằng việc sử dụng các lệnh width, height. Khi bóp ảnh như thế, nếu bóp theo 2 chiều (widthheight) thì ảnh thường bị méo dạng (không còn tỉ lệ với ảnh gốc), nếu không muốn gặp hiện tượng này thì chỉ nên bóp theo 1 chiều. Tuy nhiên, ở những phần, ví dụ như tiện ích recent post, các bạn muốn các ảnh thumbnail được đều nhau, và có cùng kích cỡ thì việc bóp ảnh theo 1 chiều không đáp ứng được. Và hôm nay mình sẽ giới thiệu cho các bạn 1 các để lấy ảnh thumbnail từ ảnh gốc mà chỉ cần dùng CSS.

Mình sẽ giải thích sơ về cách thức này. Giả sử ta có 1 tấm ảnh và 1 tờ giấy màu (màu đen chẳng hạn, và kích thước tờ giấy màu sẽ lớn hơn tấm ảnh), sau đó ta cắt 1 cái lỗ hình vuông trên tờ giấy màu, kích cỡ tùy ý (giả sử 200x200px). Rồi ta đặt tờ giấy màu trên tấm ảnh, khi đó ta sẽ nhìn được 1 phần tấm ảnh qua cái lỗ mà ta đã cắt trên tờ giấy màu. Và phần ảnh ta thấy được này sẽ là ảnh thumbnail. Để tùy chỉnh vùng ảnh để hiển thị ảnh thumbnail thì ta chỉ việc dịch chuyển tờ giấu hoặc dịch chuyển ảnh.

Bên dưới là ảnh minh họa

Còn đây là demo

Ảnh gốc

Ảnh thumbnail lấy được:

* Các bước thực hiện:
- đầu tiên các bạn chèn code CSS bên dưới vào trong code template (chèn vào trước dòng code ]]></b:skin> trong code template)
/* CSS thumbnail */

div.thumb{
margin:.5em 0;
margin-right:10px;
border:1px solid #999;
padding:2px;
}
div.thumb {
display:block;
width:100px;
height:100px;
line-height:100px;
overflow:hidden;
position:relative;
z-index:1;
}
div.thumb img{
position:absolute;
top:-20px;
left:-50px;
}

/* END CSS thumbnail */
- 1 số lưu ý về code CSS ở trên:
+ các giá trị width, height trong class div.thumb là chiều cao và độ rộng của ảnh thumbnail.
+ Các top, left trong class div.thumb img chính là vị trí góc trái trên của ảnh thumbnail (so với ảnh gốc).
+ Khi muốn hiển thị ảnh thumbnail thì bạn chỉ việc dùng code tương tự như bên dưới
<div class="thumb"><img src="Link ảnh" /></div>
+ Ngoài ra, nếu ảnh lớn quá, mà ta muốn lấy ảnh thumbnail nhỏ thì (vì khi đó ảnh thumbnail sẽ ko thể hiện hết được ảnh gốc) bạn có thể resize ảnh gốc nhỏ lại, ví dụ như bên dưới:
<div class="thumb"><img src="Link ảnh" width="200" /></div>

Chúc các bạn thành công.


Enter your mail address:

16

Rùa Biển

cách này hay nhưng có một khuyết điểm là đôi khi hình ảnh bị khuyết đi nhìn xấu và rất khó hiểu

May Thy

Hay quá, để mình áp dụng thử xem

Phan Dũng

đúng rồi, với các ảnh có chiều cao và rộng quá lệch nhau thì dễ bị khuyết.

MoigioiForex.Com

chuyển ảnh thành CSS trực tuyến >>> http://www.imgtocss.com

Phan Dũng

@MoigioiForex.Com : woah. hay thiệt

Ngankvn ®

Cái propage dành cho label của Dzũng ấy, làm sao để nó chỉ hiện ở trang label mà không hiện ở trang chủ vậy ??

Rồi còn cái kiểu xem "Full/List" nữa :D
Đăng thằng bài đi, mình viewsource cũng làm đc rồi, nhưng lại phải dò lại các thành phần để chỉnh nó theo style của mình :D

Ngankvn ®

Dzũng ơi, fix cái lỗi hiện phân trang của propage ở trên đầu đi
IE và Opera bị vậy nên độc giả mỗi lần muốn qua trang phải cuộn ngược lên, khi xem các bài thì dĩ nhiên là phải dò xuống, xong lại phải cuộn ngược lên để qua trang

Ngankvn ®

Trong CSS của Dzũng có cái -khtml.... là gì thế ??

Ngankvn ®

Dzũng ơi, xem dạng list thì phải cho lượng bài viết hiển thị nhiều gấp 5 lần mới đúng chớ
Chỉnh lèm seo ?

Ngankvn ®

Dzũng ui, label của mình nó vẫn hiện bài của theme http://home.blogtruyen.com/search/label/Truyen%20Full

Ngankvn ®

Xong òy , mừng quá :D
Giá Dzũng cũng thức đêm giống mình thì đỡ khổ nhỉ :D
Những khúc mắc nãy giờ hỏi chỉ còn 2 cái không giải quyết đc :
1. dạng list show nhiều post hơn
2. phân trang lộn lên đầu ở IE và Opera :D

Còn về thủ thuật này thì cũng thú vị đấy, chỉ có mỗi cái css ovewflow và position mà Dzũng cũng biến hẳn thành một thủ thuật được ;))
(comments câu cuối để hợp thức hóa mớ comments nãy giờ =)))

DPMNET

Bác Ngân tự sướng ghê quá :D, trình độ thức đêm của bác thật ghê gớm, mình tới 1h là mờ mắt rồi. Anh Dũng cũng làm 1 bài hướng dẫn cho bà con cái này chứ nhỉ ;;)

Phan Dũng

@Ngân: cái đoạn này là để hiển thị bài viết dạng list nè

if (view=="full") {
var numposts = 15; // số bài viết hiển thịt trên 1 trang
}
else {var numposts = 20;}

số 20 đó, Ngân tập đọc lệnh đi, nếu view có giá trị là full thì số bài viết là 15, ngoài ra (tức là view có giá trị là list) thì số bài viết sẽ là 20

Phan Dũng

ặck, comment thiếu rồi sai tè le. thôi kệ

Còn cái nữa, ProPage này mình sẽ hướng dẫn chi tiết sau khi bản ProPage 1 được post lại

Duy Pham

Cái propage này của bác là lấy dữ liệu từ feed để hiển thị phải k? Và hình như phải lôi hết feed về?

p/s: nếu dùng ảnh trên Picasa thì thêm s72, s100... vào link ảnh cũng resize theo kiểu này nhưng dung lượng ảnh giảm đi.

Duy Pham

Em comment bằng tài khoản Blogger hình như toàn vào spam hay sao ý nhỉ, có chèn code gì đâu :-/



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home