Hình nền Căng thẳng 100% Chiều cao của Div

Question

Tôi có một vùng chứa sẽ tăng/thu nhỏ theo chiều cao dựa trên số lượng văn bản được đặt động bên trong nó. Vùng chứa sẽ có hình nền cần kéo dài/thu nhỏ vì vùng chứa thay đổi chiều cao và không thể cắt hình ảnh này theo bất kỳ cách nào. Tôi tự hỏi làm thế nào tôi sẽ phong cách .container để có được hình nền để được ở lại 100% của div.

Tôi đã thử những điều sau đây, nhưng nó dường như không làm việc:

.container { background: url('backgroundImage.jpg') 0 100% no-repeat; } 

Mẫu Cấu trúc HTML:

<div class="container"> 
    <p class="text">This is a short container</p> 
</div> 

<div class="container"> 
    <p class="text">This<br> is<br> a<br> tall<br> container</p> 
</div> 

Answer 1

Bạn cần đặt thuộc tính background-size. background-size: 100% 100%; sẽ mở rộng quy mô để lấp đầy vùng chứa cả theo chiều ngang và chiều dọc.

Tôi thường thích background-size: cover; vì nó duyên dáng chia tỷ lệ hình ảnh khi cần, duy trì tỷ lệ cỡ ảnh. Đảm bảo kiểm tra support để có kích thước nền vì đây là thuộc tính khá mới.

Answer 2

Bạn hãy thử background-size: cover;?

Trong ví dụ của bạn, bạn đang điều chỉnh background-position.

Answer 3

Có một thuộc tính trong css3 được gọi là kích thước nền: bìa; và kích thước nền: chứa ;. Bạn có thể muốn sử dụng background-size:cover; để phù hợp với nhu cầu của bạn.

** contain

Chỉ định rằng hình ảnh nền cần được nhân rộng để được lớn như có thể đồng thời đảm bảo cả hai kích thước của nó là nhỏ hơn hoặc bằng kích thước tương ứng của khu vực vị trí nền.

cover 

Chỉ định rằng hình ảnh nền cần được nhân rộng để được làm nhỏ như có thể đồng thời đảm bảo cả hai kích thước của nó là lớn hơn hoặc bằng với kích thước tương ứng của nền khu vực định vị.

**

Answer 4

Trong trường hợp background-size: contain; là không hữu ích và nếu bạn đang tìm kiếm hình nền HEIGHT đầy đủ mà không tỉ lệ mất sau đó sử dụng dưới đây được viết CSS

background-size: auto 100%; 

thiết lập tham số đầu tiên để "tự động "sẽ đảm bảo rằng hình ảnh giữ chiều rộng theo tỷ lệ chiều cao hiện tại. Tham số thứ hai là "100%" sẽ giúp hình nền thích ứng với chiều cao tương tự như DIV.