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>
"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;
}
0 nhận xét:
Đăng nhận xét
♦ Mời bạn gửi Nhận xét của mình. Nếu không có tài khoản Blogger-Google, LiveJournal, WordPress, TypePad, AIM, OpenID, bạn vẫn có thể nhận xét bằng cách chọnComment as là Tên/URL hay Ẩn danh. Tuy nhiên bạn nên chọn Tên/URL với URL có thể để trống. Bạn vui lòng gõ tiếng Việt có dấu.
♦ Bấm vào Xem trước [Preview] bên dưới khung nhận xét nếu muốn xem trước comment đã viết, trước khi post [đăng]. Tương tự, bấm vào Đăng ký qua email [Subscribe by email] để đăng ký theo dõi nhận xét của bài này.
♦ Các bạn tự chịu trách nhiệm với Nhận xét của mình. Nhận xét để phản hồi, đánh giá, góp ý.... suy nghĩ của bạn. Thông qua Nhận xét hãy để cho mọi người biết Bạn là ai.
Xem ký tự của emoticons khỉ Yoyo tại đây.