Crop ả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>untitled</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;
}

(ST)

< Prev		Next >

Chủ đề CSS

Chủ đề HTML

SEO and SEM

Các phong cách thiết kế

Trình quản lý nội dung

Hướng dẫn thực hành

Tư liệu

Thư giãn

Liên kết hữu ích

Liên kết website

Vài nét về tác giả

Chào tất cả các bạn, tên tôi là Chu Hữu Trung. Thiết kế Web là nghề của tôi, hiện nay tôi đang sống và làm việc tại Hà Nội (Việt Nam). Tôi rất vui khi các bạn ghé thăm cssyeah.com