CSS hình hộp

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

Nội dung chính Show

• Vấn đề
• Gói trong một yếu tố bổ sung
• Áp dụng hình ảnh làm nền
• Giới thiệu hộp xem đối tượng
• Kích thước nội tại của hình ảnh
• Áp dụng giá trị chèn
• Sửa méo hình ảnh
• Phóng to hoặc thu nhỏ
• Thử nghiệm
• Phần kết luận
• Làm cách nào để phủ hình ảnh trong CSS?
• Làm cách nào để thêm hình ảnh vào CSS?
• Làm cách nào để đặt kích thước hình ảnh trong CSS?

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

 class="brownies">

.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;
}

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

 class="brownies">

2, thu phóng hoặc xoay nội dung của phần tử

Tài sản có giá trị

 class="brownies">

 class="brownies">

Hãy quay trở lại vấn đề

Với object-view-box, chúng ta sẽ có thể sử dụng

 class="brownies">

 class="brownies">

Mụ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ị 
 class="brownies">
4
Áp dụng giá trị chèn
Giá trị 
 class="brownies">
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 đệm
Giá 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ái
Sử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ốt
img {
    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 
 class="brownies">
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;.
 

Đọc tiếp