Tôi luôn muốn có một cách CSS riêng để cắt ảnh và định vị ảnh theo bất kỳ hướng nào tôi cần. Điều này có thể thực hiện được bằng cách sử dụng một phần tử HTML bổ sung kết hợp với các thuộc tính CSS khác nhau mà tôi sẽ giải thích sau
Trong bài viết này, tôi sẽ hướng dẫn bạn về thuộc tính CSS mới object-view-box
được đề xuất bởi Jake Archibald vào đầu năm nay. Nó cho phép chúng tôi cắt xén hoặc thay đổi kích thước các phần tử HTML đã thay thế như
figure {
position: relative;
width: 300px;
aspect-ratio: 1;
overflow: hidden;
border-radius: 15px;
}
img {
position: absolute;
left: -23%;
top: 0;
right: 0;
bottom: 0;
width: 180%;
height: 100%;
object-fit: cover;
}
0 hoặc
figure {
position: relative;
width: 300px;
aspect-ratio: 1;
overflow: hidden;
border-radius: 15px;
}
img {
position: absolute;
left: -23%;
top: 0;
right: 0;
bottom: 0;
width: 180%;
height: 100%;
object-fit: cover;
}
1
Vấn đề
Trong ví dụ sau, chúng ta có một hình ảnh cần được cắt. Lưu ý cách chúng tôi chỉ muốn một phần cụ thể của hình ảnh đó
Hiện tại, chúng ta có thể giải quyết điều đó bằng một trong những điều sau đây
- Sử dụng một
figure {
position: relative;
width: 300px;
aspect-ratio: 1;
overflow: hidden;
border-radius: 15px;
}
img {
position: absolute;
left: -23%;
top: 0;
right: 0;
bottom: 0;
width: 180%;
height: 100%;
object-fit: cover;
}
2 và bọc nó trong một phần tử bổ sung - Sử dụng hình ảnh như một
figure {
position: relative;
width: 300px;
aspect-ratio: 1;
overflow: hidden;
border-radius: 15px;
}
img {
position: absolute;
left: -23%;
top: 0;
right: 0;
bottom: 0;
width: 180%;
height: 100%;
object-fit: cover;
}
3 và sửa đổi vị trí và kích thước
Gói trong một yếu tố bổ sung
Đây là một giải pháp phổ biến cho vấn đề này, đây là những gì đang xảy ra
- Bao bọc hình ảnh trong một phần tử khác [trong trường hợp của chúng ta là
figure {
position: relative;
width: 300px;
aspect-ratio: 1;
overflow: hidden;
border-radius: 15px;
}
img {
position: absolute;
left: -23%;
top: 0;
right: 0;
bottom: 0;
width: 180%;
height: 100%;
object-fit: cover;
}
4] - Đã thêm
figure {
position: relative;
width: 300px;
aspect-ratio: 1;
overflow: hidden;
border-radius: 15px;
}
img {
position: absolute;
left: -23%;
top: 0;
right: 0;
bottom: 0;
width: 180%;
height: 100%;
object-fit: cover;
}
5 và figure {
position: relative;
width: 300px;
aspect-ratio: 1;
overflow: hidden;
border-radius: 15px;
}
img {
position: absolute;
left: -23%;
top: 0;
right: 0;
bottom: 0;
width: 180%;
height: 100%;
object-fit: cover;
}
6 - Đã thêm
figure {
position: relative;
width: 300px;
aspect-ratio: 1;
overflow: hidden;
border-radius: 15px;
}
img {
position: absolute;
left: -23%;
top: 0;
right: 0;
bottom: 0;
width: 180%;
height: 100%;
object-fit: cover;
}
7 vào hình ảnh và thử với các giá trị định vị và định cỡ để đạt được kết quả
________số 8_______
figure {
position: relative;
width: 300px;
aspect-ratio: 1;
overflow: hidden;
border-radius: 15px;
}
img {
position: absolute;
left: -23%;
top: 0;
right: 0;
bottom: 0;
width: 180%;
height: 100%;
object-fit: cover;
}
Áp dụng hình ảnh làm nền
Trong giải pháp này, chúng tôi sử dụng
figure {
position: relative;
width: 300px;
aspect-ratio: 1;
overflow: hidden;
border-radius: 15px;
}
img {
position: absolute;
left: -23%;
top: 0;
right: 0;
bottom: 0;
width: 180%;
height: 100%;
object-fit: cover;
}
8 và áp dụng hình ảnh làm nền, sau đó chúng tôi thay đổi các giá trị vị trí và kích thước
.brownies {
width: 300px;
aspect-ratio: 3 / 2;
background-image: url["brownies.jpg"];
background-size: 700px auto;
background-position: 77% 68%;
background-repeat: no-repeat;
}
Nó hoạt động rất tốt, nhưng nếu chúng ta muốn áp dụng những điều trên cho một
figure {
position: relative;
width: 300px;
aspect-ratio: 1;
overflow: hidden;
border-radius: 15px;
}
img {
position: absolute;
left: -23%;
top: 0;
right: 0;
bottom: 0;
width: 180%;
height: 100%;
object-fit: cover;
}
2 thì sao? Giới thiệu hộp xem đối tượng
Tôi đã rất phấn khích khi thấy rằng tài sản object-view-box
có thể được vận chuyển trong Chrome 104. Hiện đã có trong Chrome canary
Theo
Thuộc tính object-view-box chỉ định một “view box” trên một phần tử, tương tự như thuộc tính
2, thu phóng hoặc xoay nội dung của phần tử
Tài sản có giá trị
3. Đối với bản demo trong bài viết này, tôi sẽ tập trung vào cách sử dụng
4Hãy quay trở lại vấn đề
Với object-view-box
, chúng ta sẽ có thể sử dụng
6 để vẽ một hình chữ nhật từ bốn cạnh [trên, phải, dưới, trái], sau đó áp dụng
7 để tránh biến dạng
img {
aspect-ratio: 1;
width: 300px;
object-view-box: inset[25% 20% 15% 0%];
}
Làm thế nào là thậm chí làm việc? . Đi nào
Kích thước nội tại của hình ảnh
Kích thước nội tại là chiều rộng và chiều cao mặc định của hình ảnh. Hình ảnh tôi đang xử lý có kích thước
8img {
aspect-ratio: 1;
width: 300px;
}
Với CSS trên, kích thước hiển thị của hình ảnh sẽ là
9Mục tiêu của chúng tôi là vẽ một hình chữ nhật trên hình ảnh nội tại. Để làm điều đó, chúng tôi sẽ sử dụng giá trị
4Áp dụng giá trị chèn
Giá trị
4 sẽ dựa trên chiều rộng và chiều cao của ảnh gốc, dẫn đến ảnh bị cắt. Nó sẽ giúp chúng ta vẽ một hình chữ nhật bên trong và kiểm soát bốn cạnh, tương tự như xử lý lề hoặc phần đệmGiá trị bên trong xác định một hình chữ nhật bên trong. Chúng ta có thể kiểm soát bốn cạnh, giống như chúng ta xử lý lề hoặc phần đệm. Trong ví dụ sau, thẻ có hình nhỏ 20px từ tất cả các cạnh
Hãy quay lại CSS cho object-view-box
img {
aspect-ratio: 1;
width: 300px;
object-view-box: inset[25% 20% 15% 0%];
}
Đây là cách phía trên trông đằng sau hậu trường. Các giá trị
.brownies {
width: 300px;
aspect-ratio: 3 / 2;
background-image: url["brownies.jpg"];
background-size: 700px auto;
background-position: 77% 68%;
background-repeat: no-repeat;
}
2, .brownies {
width: 300px;
aspect-ratio: 3 / 2;
background-image: url["brownies.jpg"];
background-size: 700px auto;
background-position: 77% 68%;
background-repeat: no-repeat;
}
3, .brownies {
width: 300px;
aspect-ratio: 3 / 2;
background-image: url["brownies.jpg"];
background-size: 700px auto;
background-position: 77% 68%;
background-repeat: no-repeat;
}
4 và .brownies {
width: 300px;
aspect-ratio: 3 / 2;
background-image: url["brownies.jpg"];
background-size: 700px auto;
background-position: 77% 68%;
background-repeat: no-repeat;
}
5 tương ứng đại diện cho đỉnh, phải, dưới và tráiSửa méo hình ảnh
Nếu kích thước của hình ảnh là hình vuông, kết quả cắt sẽ bị biến dạng
Điều này có thể dễ dàng với tài sản
.brownies {
width: 300px;
aspect-ratio: 3 / 2;
background-image: url["brownies.jpg"];
background-size: 700px auto;
background-position: 77% 68%;
background-repeat: no-repeat;
}
6 được hỗ trợ tốtimg {
aspect-ratio: 1;
width: 300px;
object-view-box: inset[25% 20% 15% 0%];
object-fit: cover;
}
Đó là nó. Điều đó không tuyệt vời sao?
Phóng to hoặc thu nhỏ
Chúng ta có thể sử dụng
6 để phóng to hoặc thu nhỏ hình ảnh. Theo thử nghiệm của tôi, quá trình chuyển đổi hoặc hoạt hình sẽ không hoạt động với object-view-box
Chúng tôi cũng có thể thu nhỏ với giá trị chèn âm
Hãy tưởng tượng điều này sẽ hữu ích như thế nào khi có thể phóng to hình ảnh mà không cần gói nó vào một phần tử bổ sung
Thử nghiệm
Đây là bản demo mà bạn có thể thử nghiệm trong Chrome Canary ngay hôm nay. Vui lòng đảm bảo bật cờ "Các tính năng của Nền tảng web thử nghiệm"
Xem Bút CSS. có - Chủ đề màu của Ahmad Shadeed [@shadeed] trên CodePen
Phần kết luận
Tôi rất hào hứng với các trường hợp sử dụng tiềm năng khác cho tính năng mới này. Đó là cái nhìn đầu tiên nhanh chóng và tôi sẽ quay lại sau với nhiều khám phá hơn
Làm cách nào để phủ hình ảnh trong CSS?
Tóm lại, hiệu ứng lớp phủ CSS đạt được bằng cách sử dụng cách sau. .
các thuộc tính CSS nền-hình ảnh và nền để thêm hiệu ứng lớp phủ hình ảnh và độ dốc tuyến tính
Chức vụ. thuộc tính CSS tuyệt đối, trên cùng, dưới cùng, bên phải, bên trái để kiểm soát vị trí của hình ảnh hoặc văn bản lớp phủ
Làm cách nào để thêm hình ảnh vào CSS?
To add images to a page, we use the inline element. The element is a self-containing, or empty, element, which means that it doesn't wrap any other content and it exists as a single tag.
Làm cách nào để đặt kích thước hình ảnh trong CSS?
Ví dụ về chiều cao và chiều rộng của CSS .
Set the height and width of a
element: div { height: 200px; width: 50%; .. .
Set the height and width of another
element: div { height: 100px; width: 500px; .. .
This
element has a height of 100 pixels and a max-width of 500 pixels: div { max-width: 500px; height: 100px;.