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)
| < Lùi | Tiếp theo > |
|---|
