Hướng dẫn css background image fit to div - hình nền css phù hợp với div

Tôi có một hình ảnh nền trong div sau, nhưng hình ảnh bị cắt:

Có cách nào để hiển thị hình ảnh nền mà không cần cắt nó không?

Purag

16.8K4 Huy hiệu vàng53 Huy hiệu bạc74 Huy hiệu đồng4 gold badges53 silver badges74 bronze badges

Đã hỏi ngày 20 tháng 11 năm 2011 lúc 7:59Nov 20, 2011 at 7:59

3

Bạn có thể đạt được điều này với thuộc tính

background-size: contain;

Để mở rộng hình ảnh nền để phù hợp với bên trong DIV:

background-size: contain;

Để mở rộng hình ảnh nền để bao phủ toàn bộ DIV:

background-size: cover;

Ví dụ về JSfiddle hoặc đoạn trích Runnable:

#imagecontainer {
  background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
  width: 100px;
  height: 200px;
  border: 1px solid;
  background-size: contain;
}

Ngoài ra còn tồn tại một bộ lọc cho hỗ trợ IE 5.5+, cũng như tiền tố nhà cung cấp cho một số trình duyệt cũ hơn.

BASJ

38.7K85 Huy hiệu vàng337 Huy hiệu bạc604 Huy hiệu đồng85 gold badges337 silver badges604 bronze badges

Đã trả lời ngày 20 tháng 11 năm 2011 lúc 8:14Nov 20, 2011 at 8:14

GRCGRCgrc

22.2k4 Huy hiệu vàng39 Huy hiệu bạc63 Huy hiệu Đồng4 gold badges39 silver badges63 bronze badges

0

Nếu những gì bạn cần là hình ảnh có cùng kích thước của Div, tôi nghĩ đây là giải pháp thanh lịch nhất:

background-size: 100% 100%;

Nếu không, câu trả lời của @GRC là câu trả lời được chiếm đoạt nhiều nhất.

Nguồn: http://www.w3schools.com/cssref/css3_pr_background-ze.asp

Đã trả lời ngày 14 tháng 8 năm 2015 lúc 14:25Aug 14, 2015 at 14:25

SertagesertageSertage

2.9951 Huy hiệu vàng17 Huy hiệu bạc25 Huy hiệu đồng1 gold badge17 silver badges25 bronze badges

3

Bạn có thể sử dụng các thuộc tính này:

background-size: contain;
background-repeat: no-repeat;

Và mã của bạn sau đó là như thế này:

Đã trả lời ngày 13 tháng 11 năm 2018 lúc 5:05Nov 13, 2018 at 5:05

hojjat.mihojjat.mihojjat.mi

1.26614 Huy hiệu bạc22 Huy hiệu đồng14 silver badges22 bronze badges

background-position-x: center;
background-position-y: center;

Đã trả lời ngày 29 tháng 10 năm 2020 lúc 16:10Oct 29, 2020 at 16:10

1

Bạn cũng sử dụng điều này:

background-size:contain;
height: 0;
width: 100%;
padding-top: 66,64%; 

Tôi không biết các giá trị div của bạn, nhưng hãy giả sử bạn đã có những thứ đó.

background-size: contain;

Một lần nữa, đó chỉ là những con số ngẫu nhiên. Nó có thể khá khó để tạo ra hình ảnh nền (nếu bạn muốn) với chiều rộng cố định cho div, vì vậy hãy sử dụng tốt hơn tối đa. Và thực sự không phức tạp khi lấp đầy một div bằng hình ảnh nền, chỉ cần đảm bảo bạn tạo kiểu cho phần tử cha đúng cách, vì vậy hình ảnh có một nơi mà nó có thể đi vào.

Chris

Đã trả lời ngày 24 tháng 3 năm 2015 lúc 15:58Mar 24, 2015 at 15:58

ChristianchristianChristian

1011 Huy hiệu bạc2 Huy hiệu đồng1 silver badge2 bronze badges

1

thử bất kỳ điều nào sau đây,

background-size: contain;

Thuộc tính

background-size: contain;

Có các cú pháp khác nhau mà bạn có thể sử dụng với thuộc tính này: cú pháp từ khóa ("tự động", "bìa" và "chứa"), cú pháp một giá trị (đặt chiều rộng của hình ảnh (chiều cao trở thành "tự động"), hai -Value Cú pháp (Giá trị thứ nhất: Chiều rộng của hình ảnh, Giá trị thứ hai: Chiều cao).

• Tỷ lệ phần trăm - Đặt chiều rộng và chiều cao của hình nền theo phần trăm phần tử cha. - Sets the width and height of the background image in percent of the parent element.
• Bìa - Thay đổi kích thước hình nền để che toàn bộ thùng chứa, ngay cả khi nó phải kéo dài hình ảnh hoặc cắt một chút ra khỏi một trong các cạnh - Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
• chứa - thay đổi kích thước hình nền để đảm bảo hình ảnh được hiển thị đầy đủ - Resize the background image to make sure the image is fully visible

Để biết thêm: https://www.w3schools.com/cssref/css3_pr_background-it.asp

Đã trả lời ngày 3 tháng 9 năm 2020 lúc 14:19Sep 3, 2020 at 14:19

CodemakerCodemakerCodemaker

9.7293 huy hiệu vàng71 Huy hiệu bạc61 Huy hiệu đồng3 gold badges71 silver badges61 bronze badges

1

Alternative:

background-size: contain;

Đã trả lời ngày 26 tháng 5 lúc 0:59May 26 at 0:59

MarcelmarcelMarcel

2.6402 Huy hiệu vàng24 Huy hiệu bạc41 Huy hiệu đồng2 gold badges24 silver badges41 bronze badges

1

Bạn cũng có thể thử điều này, đặt kích thước nền làm nắp và để nó trông đẹp hơn cũng đặt trung tâm vị trí nền như vậy:

background-size: contain;

Đã trả lời ngày 4 tháng 10 lúc 1:02Oct 4 at 1:02

Làm cách nào để làm cho hình nền của tôi phù hợp với kích thước của một div?