Làm cách nào để chia tỷ lệ hình nền cho vừa với div trong css?

Tạo một div hoặc bất kỳ phần tử HTML cấp khối nào với tên lớp được gọi là. bg-container nơi chúng ta sẽ thêm hình nền vào

Tạo toàn màn hình cho Div vùng chứa

Sau đó, đặt div toàn màn hình để hình nền vừa với toàn màn hình của cửa sổ trình duyệt

Ghi chú. Bạn có thể thay đổi kích thước của div vùng chứa nếu bạn không muốn hình ảnh lấp đầy toàn bộ màn hình vì hình nền sẽ chỉ hiển thị dựa trên kích thước của div vùng chứa

Có một số cách để tạo div toàn màn hình nhưng tôi sẽ sử dụng chiều cao. 100% thuộc tính CSS để đạt được nó lần này

Đây là một quy trình gồm hai bước

1. Thêm một vài thuộc tính CSS vào HTML và bộ chọn nội dung. Đặt lề thành 0 sẽ loại bỏ mọi khoảng trắng xung quanh cửa sổ trình duyệt và đặt chiều cao thành 100%

html, body {
  margin:0;
  height:100%;
}

2. Thêm ba thuộc tính vào. bộ chọn vùng chứa bg

.bg-container {
  width:100%;
  height:100%;
  border:5px solid red;
}

Tôi đã đặt chiều rộng thành 100% một cách rõ ràng, nhưng chúng ta không cần phải làm như vậy vì div là phần tử cấp khối và chiều rộng mặc định của nó được kéo dài bằng chiều rộng gốc của nó, trong trường hợp này là phần thân

Sau đó, đặt chiều cao. 100% sẽ kéo dài chiều cao của. bg-container vào cạnh dưới của khung nhìn trình duyệt

Để làm cho chiều cao hoạt động, hãy đảm bảo bạn đã thêm chiều cao. 100% cho HTML và bộ chọn nội dung ở trên, nếu không, nó sẽ không hoạt động

Để thấy rằng. bg-container, thêm đường viền có chiều rộng 5px, kiểu liền và màu đỏ

Ở giai đoạn này, tôi gặp sự cố là các thanh cuộn xuất hiện ở bên phải và bên dưới làm ẩn viền đỏ

Hãy khắc phục điều đó

Để ẩn thanh cuộn, hãy thêm tràn. ẩn đối với bộ chọn HTML và nội dung CSS

html, body {
  margin:0;
  height:100%;
  overflow:hidden;
}

Như bạn có thể thấy từ hình bên dưới, thanh cuộn đã biến mất nhưng đường viền ở dưới cùng và bên phải vẫn bị ẩn

Điều này là do khi bạn cung cấp đường viền cho phần tử đã có chiều rộng 100%, đường viền sẽ được thêm vào vùng chứa ngoài chiều rộng 100% ở cả bên trái và bên phải. Đó là lý do tại sao đường viền bên phải và bên dưới kéo dài ra ngoài mép của chế độ xem trình duyệt

Nói cách khác, để đưa đường viền trở lại, bao gồm đường viền trong chiều rộng 100%, tất cả những gì tôi phải thêm là kích thước hộp. thuộc tính CSS hộp viền thành. bg-container

.bg-container {
  width:100%;
  height:100%; 
  border:5px solid red;
  box-sizing:border-box;
}

Bằng cách này, tôi biết nếu tôi thêm một hình ảnh làm hình nền vào vùng chứa này thì nó sẽ hiển thị trên toàn màn hình

Được đề xuất
Thiết kế biểu mẫu đăng ký hấp dẫn bằng HTML & CSS

Thêm hình nền toàn màn hình

Hãy thêm hình nền vào. bg-container

Đối với điều đó, tất cả những gì tôi phải làm là thêm thuộc tính CSS hình nền vào. bg-container với đường dẫn URL hình ảnh, thường sẽ là vị trí hình ảnh của thư mục dự án của bạn hoặc bất kỳ URL hình ảnh web nào

.bg-container {
  background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg");
  width:100%;
  height:100%; 
  border:5px solid red;
  box-sizing:border-box;
}

Giá trị của thuộc tính hình nền phải là từ URL theo sau là đường dẫn URL hình ảnh trong dấu ngoặc đơn hoặc dấu ngoặc kép bên trong dấu ngoặc đơn

Được đề xuất
Trung tâm CSS A Div theo chiều ngang và chiều dọc

Điều chỉnh kích thước hình nền

Đợi đã...chúng ta chưa xong đâu

Như bạn có thể thấy hình ảnh bị cắt vì kích thước hình ảnh lớn hơn chiều rộng của. bg-container. Tôi có thể sửa nó bằng thuộc tính kích thước nền. Nó có hai giá trị chính Cover và Contain

Bìa sẽ cố gắng khớp chiều cao của hình ảnh với chiều cao màn hình và kéo dài chiều rộng theo tỷ lệ

.bg-container {
  background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg");
  background-size:cover;
  ...
}

.bg-container {
  background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg");
  background-size:contain;
  ...
}

Như bạn có thể thấy, chiều rộng của hình ảnh tôi chọn rộng hơn chiều cao, vì vậy khi bạn sử dụng chứa làm giá trị của kích thước nền, chiều rộng của hình ảnh được kéo dài để phù hợp với chiều rộng của trình duyệt nhưng chiều cao ngắn và bạn có thể thấy

Hãy khắc phục điều đó

Sử dụng lặp lại nền. thuộc tính CSS không lặp lại vào. bg-container để loại bỏ các hình ảnh lặp lại ở phía dưới

Như tôi đã đề cập trước đây, hình ảnh tôi chọn rộng hơn cao hơn, vì vậy trong trường hợp này, rõ ràng là sử dụng kích thước nền. che để lấp đầy màn hình một cách độc đáo với hình ảnh

.bg-container {
  background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg");
  background-size:cover;
  background-repeat:no-repeat;
  ...
}

Được đề xuất
Giải thích về bố cục nhiều cột đáp ứng CSS Flexbox cần biết

Hình nền trung tâm

Điều này tốt nhưng nếu tôi muốn hiển thị một phần cụ thể của hình ảnh thay vì mặc định thì sao?

Chà…chúng ta có thể làm điều này một cách dễ dàng bằng cách sử dụng thuộc tính vị trí nền

Giả sử tôi muốn căn giữa cây vào khung nhìn. Để làm điều đó, tất cả những gì tôi phải làm là thêm trung tâm center làm giá trị cho thuộc tính vị trí nền bên trong. bg-container

html, body {
  margin:0;
  height:100%;
}

Ngoài ra, nếu bạn muốn hiển thị phía trên bên trái của hình ảnh, bạn đoán nó…giá trị của vị trí nền sẽ ở phía trên bên trái, v.v.

Làm cách nào để đặt hình nền trong CSS cho div?

Tôi có thể chia tỷ lệ trên hình nền không?