Bìa kích thước nền trong css

Nhận xét bìa kích thước nền là gì là chủ đề trong bài viết hiện tại của Wiho. com. vn. Tham khảo nội dung để biết đầy đủ nhé

lục mục

• 1 1) Thuộc tính kích thước nền trong CSS
• 2 2) Cách sử dụng thuộc tính background-size trong CSS

1) Thuộc tính kích thước nền trong CSS

– Thuộc tính kích thước nền được sử dụng để thiết lập “kích thước của hình nền”

You are watching. Background-size cover is what

– Tôi có một tấm ảnh với tên là hoa. gif as after

– And a phần tử với kích thước như sau

– Nếu sử dụng tấm hình hoa. gif to doing the background for the section tử, thì mặc định kích thước của hình nền sẽ bằng với kích thước của tấm hình gốc

– Tuy nhiên, với việc sử dụng thuộc tính kích thước nền, tôi có thể thiết lập kích thước của hình nền lớn hơn kích thước của hình gốc

– Hoặc nhỏ hơn kích thước của tấm ảnh gốc

. .

2) Cách sử dụng thuộc tính background-size trong CSS

– Để sử dụng thuộc tính background-size, ta sử dụng cú pháp như sau

kích thước nền. value;- Dưới đây là cách xác định & danh sách các “giá trị” được sử dụng cho thuộc tính background-size

Tự động

– Hình nền sẽ có kích thước bằng với kích thước của tấm hình gốc

Xem ví dụ apx bpx

– Hình nền sẽ có chiều rộng là pixel và chiều cao là b pixel

– Nếu một trong hai giá trị là tự động thì giá trị đó sẽ tự động được xác định dựa trên giá trị còn lại sao cho đúng với bản gốc

Xem thêm. Game Đuổi Hình Bắt Chữ Offline Cho Android 5, Tải Game Đuổi Hình Bắt Chữ Miễn Phí

Ví dụ. Tôi có một tấm hình với kích thước 200×100. Nếu giá trị thuộc tính background-size là 400px auto thì nó sẽ tương đương với 400px 200px Nếu giá trị thuộc tính background-size là auto 70px thì nó sẽ tương đương với 140px 70px

- Lưu ý. Nếu ta chỉ đưa ra một giá trị thì giá trị đó là chiều rộng của hình nền, giá trị còn lại sẽ mặc định là tự động

Xem ví dụ% b%

– Hình nền sẽ có

Chiều rộng bằng a % chiều rộng trong phạm vi phần mà hình nền bắt đầu được xuất hiện. Chiều cao bằng b % chiều cao trong phạm vi phần mà hình nền bắt đầu được xuất hiện.
(bạn hãy xem thuộc tính background-origin để biết thế nào là phạm vi hình nền bắt đầu được xuất hiện)

– Nếu một trong hai giá trị là tự động thì giá trị đó sẽ tự động được xác định dựa trên giá trị còn lại sao cho đúng với bản gốc

- Lưu ý. Nếu ta chỉ đưa ra một giá trị thì giá trị đó là chiều rộng của hình nền, giá trị còn lại sẽ mặc định là tự động

View for over

– Đối với giá trị này, hình nền sẽ có các đặc điểm như sau

Hình nền sẽ “lấp đầy” phần phân tích của phần tử. Tỷ lệ chiều rộng/chiều cao của hình nền sẽ bằng với Tỷ lệ chiều rộng/chiều cao của hình gốc. Hình nền sẽ được hiển thị “trạng thái” với kích thước lớn nhất có thể có trong phần tử HTML

Tôi biết điều này đã cũ, tuy nhiên nhiều giải pháp tôi thấy ở trên có vấn đề với hình ảnh/video quá lớn so với vùng chứa nên không thực sự hoạt động như ảnh bìa có kích thước nền. Tuy nhiên, tôi quyết định tạo "các lớp tiện ích" để nó hoạt động cho hình ảnh và video. Bạn chỉ cần cung cấp cho vùng chứa lớp. media-cover-wrapper và chính mục phương tiện đó là lớp. phương tiện truyền thông

Sau đó, bạn có jQuery sau

function adjustDimensions(item, minW, minH, maxW, maxH) {
  item.css({
  minWidth: minW,
  minHeight: minH,
  maxWidth: maxW,
  maxHeight: maxH
  });
} // end function adjustDimensions

function mediaCoverBounds() {
  var mediaCover = $('.media-cover');

  mediaCover.each(function() {
   adjustDimensions($(this), '', '', '', '');
   var mediaWrapper = $(this).parent();
   var mediaWrapperWidth = mediaWrapper.width();
   var mediaWrapperHeight = mediaWrapper.height();
   var mediaCoverWidth = $(this).width();
   var mediaCoverHeight = $(this).height();
   var maxCoverWidth;
   var maxCoverHeight;

   if (mediaCoverWidth > mediaWrapperWidth && mediaCoverHeight > mediaWrapperHeight) {

     if (mediaWrapperHeight/mediaWrapperWidth > mediaCoverHeight/mediaCoverWidth) {
       maxCoverWidth = '';
       maxCoverHeight = '100%';
     } else {
       maxCoverWidth = '100%';
       maxCoverHeight = '';
     } // end if

     adjustDimensions($(this), '', '', maxCoverWidth, maxCoverHeight);
   } else {
     adjustDimensions($(this), '100%', '100%', '', '');
   } // end if
 }); // end mediaCover.each
} // end function mediaCoverBounds

Khi gọi nó, hãy đảm bảo quan tâm đến việc thay đổi kích thước trang

mediaCoverBounds();

$(window).on('resize', function(){
  mediaCoverBounds();
});

Sau đó, CSS sau

.media-cover-wrapper {
  position: relative;
  overflow: hidden;
}

.media-cover-wrapper .media-cover {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Vâng, nó có thể yêu cầu jQuery nhưng nó phản hồi khá tốt và hoạt động chính xác như kích thước nền. cover và bạn có thể sử dụng nó trên hình ảnh và/hoặc video để nhận thêm giá trị SEO đó