Ảnh bìa css

Kỹ thuật này giúp bạn tăng tốc độ tải khi dùng banner hình to đùng, banner nếu không được tốt sẽ làm website chậm đi rất nhiều

Đây là kỹ thuật rất ít người biết đến nhưng mình thấy nó rất tuyệt vời để tăng tốc độ tải trang web đặc biệt là tăng tốc độ cho các thiết bị có màn hình nhỏ. [các thiết bị nhỏ như màn hình điện thoại cpu thông thường không khỏe như PC]

Nếu bạn đang sử dụng banner thì đây sẽ là một thủ thuật tuyệt vời cho bạn để giúp cải thiện đáng kể tốc độ tải web

Kỹ thuật này có tên gọi là hình nền css dựa trên hình ảnh thích ứng

Mình vẫn đang áp dụng nó rất hiệu quả

Nội dung được thay thế có kích thước để duy trì tỷ lệ khung hình trong khi lấp đầy toàn bộ hộp nội dung của phần tử. Nếu tỷ lệ khung hình của đối tượng không khớp với tỷ lệ khung hình của hộp, thì đối tượng sẽ được cắt bớt cho vừa

object-fit = 
  fill        |
  contain     |
  cover       |
  none        |
  scale-down  

Nội dung được thay thế có kích thước để lấp đầy hộp nội dung của phần tử. Toàn bộ đối tượng sẽ lấp đầy hoàn toàn hộp. Nếu tỷ lệ khung hình của đối tượng không khớp với tỷ lệ khung hình của hộp, thì đối tượng sẽ được kéo dài để khớp với

object-fit = 
  fill        |
  contain     |
  cover       |
  none        |
  scale-down  

Nội dung thay thế không được thay đổi kích thước

object-fit = 
  fill        |
  contain     |
  cover       |
  none        |
  scale-down  

Nội dung có kích thước như thể

object-fit = 
  fill        |
  contain     |
  cover       |
  none        |
  scale-down  

object-fit: contain;
object-fit: cover;
object-fit: fill;
object-fit: none;
object-fit: scale-down;

/* Global values */
object-fit: inherit;
object-fit: initial;
object-fit: revert;
object-fit: revert-layer;
object-fit: unset;

object-fit = 
  fill        |
  contain     |
  cover       |
  none        |
  scale-down