Cách đặt chiều rộng tối thiểu với kích thước nền

Question

Tôi có hình ảnh có kích thước 1000px X 600px. Tôi muốn sử dụng nó như là một nền đáp ứng cho một div nhưng muốn thiết lập một chiều rộng tối thiểu là 1000px mặc dù cửa sổ trình duyệt nhỏ như thế nào.

Điều này thật khó chịu vì dường như không có cách nào đơn giản để xác định phút. chiều rộng.

Nếu tôi sử dụng kích thước nền: bìa - vì lý do nào đó, hình ảnh được mặc định lớn hơn 1000px.

hãy giúp

Answer 1

Nếu truy vấn phương tiện là tùy chọn, bạn có thể thiết lập truy vấn phương tiện cho chế độ xem trình duyệt nhỏ hơn 1000px.

Giả sử viewport HTML của bạn được thiết lập:

<meta name="viewport" content="width=device-width"> 

Và div của bạn được đặt tên là 'bg':

<div class="bg"></div> 

Trong CSS của bạn:

.bg { 
    width: auto; /* Scale the div to the parent width */ 
    height: 900px; /* The div needs some height to be visible */ 
    background-image: url(bg.png); /* This is your background image */ 
    background-size: 100%; /* Always size the image to the width of the div */ 
    background-position: top; /* Position the image to the top center of the div */ 
} 

/* For any viewports less than 1000px wide */ 
@media (max-width: 1000px) { 

    .bg { 
     background-size: 1000px 600px; /* Force the image to its minimum width */ 
    } 

} 

Answer 2

tôi đã cùng một vấn đề . Đoạn mã sau đã làm việc cho tôi. Tôi chỉ cần thêm một chiều rộng tối thiểu trong cùng một phần tử. Ở đây tôi chỉ sử dụng các yếu tố html, tôi sẽ giả định rằng nó sẽ là truyền thống hơn để sử dụng các yếu tố cơ thể

 /* CSS Style Sheet */ 

html { background-image:url(example.JPG); 
        background-size:cover; 
        min-width:1000px;} 

Tôi hy vọng điều này sẽ giúp,

Answer 3

Có bây giờ là một lựa chọn cho background-size-chỉ quy mô hình ảnh cho đến khi hình ảnh đã đáp ứng chiều cao/chiều rộng thực tế. Bằng cách này, bạn không cần phải đặt chiều rộng tối thiểu hoặc bất kỳ thứ gì.

Trong CSS của bạn:

body { 
    background-size: cover; 
} 

tham khảo: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Values