Việc xác định chiều rộng và chiều cao tối đa định trước của một hình ảnh giúp chúng ta giới hạn được chiều rộng và chiều cao tối đa của hình đó một cách dễ dàng. Ví dụ muốn cho hình ảnh lớn không tràn ra ngoài phần nội dung trang web thì chỉ cần định trước chiều rộng tối đa của hình ảnh đó.
Chúng ta có thể tạo ra một lớp (class) và sử dụng nó trong thẻ <img> như sau:
<img class="expa" src="URL_hình ảnh gốc có kích thước lớn" />
Tiếp đến chúng ta định thuộc tính CSS cho hình ảnh:
<style>
img.expa {
cursor: pointer;
max-width: 150px;
}
img.expa:hover {
max-width: none;
}
</style>
Trong phần CSS này chúng ta xác định kích thước tối đa cho hình ảnh hiển thị ban đầu, sau đó khi rê con trỏ vào hình ảnh thì nó được phóng to ra hình ảnh gốc có kích thước lớn.img.expa {
cursor: pointer;
max-width: 150px;
}
img.expa:hover {
max-width: none;
}
</style>
Ví dụ: Rê con trỏ vào hình ở trên để xem hiệu ứng.
{ 0 comments... read them below or add one }
Post a Comment