Kênh 360 Công Nghệ Kênh 360 Công Nghệ

Trang chủ - Thiết kế web - HTML - CSS - Cắt ảnh bằng CSS và HTML

Cắt ảnh bằng CSS và HTML

Kỹ thuật cắt ảnh (Crop) dưới đây sẽ cho phép chúng ta có thể lấy những phần ảnh chúng ta muốn. Kích thước của khung sẽ được quy định bởi thuộc tính width: và height: trong phần CSS. Chúng ta cũng có thể di chuyển vị trí khung Crop trên ảnh lớn.

Chúng ta có ví dụ sau:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
 <title>Crop ảnh bằng CSS và HTML</title>
 
 <style type="text/css" media="screen">
 div.crop {
 height: 300px;
 width: 350px;
 overflow: hidden;
 }
 div.crop img {
 margin: -300px -200px 0 0;
 }
 </style>
 
 </head>
 
 <body>
 
 <div class="crop">
 <img src="/paper-sculpture-large.jpg" class="crop" alt="Paper Sculpture Large">
 </div>
 
 </body>
 </html>

Chúng ta sẽ quy định kích thước của khung Crop trong đoạn mã CSS sau:

div.crop {
  height: 300px;
  width: 350px;
  overflow: hidden;
}

và lấy một vùng ảnh nào đó

div.crop img {
  margin: -300px -200px 0 0;
}
Theo cssyeah.com
Hướng dẫn tạo tootip trong khi rê chuột vào hình ảnh < Lùi   Tiếp theo > Làm thẻ div có thanh cuộn scrollbar
Tags:
Tin liên quan:
Tin mới hơn:
Tin cũ hơn:
Lần cập nhật cuối ( Thứ năm, 12 Tháng 3 2009 22:57 )  

Kênh 360 công nghệ

  • Nổi bật
  • Tin mới
  • Game mới
  • PrestaShop Guide
  • PrestaShop

Có thể bạn quan tâm

Download nhiều nhất

11/12
 Download PES 2011 - FIFA 11
693
18/12
 binkw32 dll
175
18/12
 TeamViewerQS
49
English French German Japanese Korean