Hình nền có chiều rộng 100% có chiều cao 'tự động'

Question

Tôi hiện đang làm việc trên một trang đích di động cho một công ty. Đó là một bố trí thực sự cơ bản nhưng bên dưới tiêu đề có một hình ảnh của một sản phẩm mà sẽ luôn luôn là 100% chiều rộng (thiết kế cho thấy nó luôn luôn đi từ cạnh này sang cạnh khác). Tùy thuộc vào chiều rộng của màn hình, chiều cao của hình ảnh rõ ràng sẽ điều chỉnh cho phù hợp. Ban đầu tôi đã làm điều này với một img (với chiều rộng CSS 100%) và nó hoạt động tốt nhưng tôi nhận ra rằng tôi muốn sử dụng các truy vấn phương tiện để phân phát các hình ảnh khác nhau dựa trên các độ phân giải khác nhau. ví dụ: một phiên bản lớn của cùng một hình ảnh. Tôi biết bạn không thể thay đổi img src bằng CSS vì vậy tôi cho rằng tôi nên sử dụng nền CSS cho hình ảnh thay vì thẻ img trong HTML.

Tôi dường như không thể làm việc này đúng cách vì div có hình nền cần cả chiều rộng và chiều cao để hiển thị nền. Tôi rõ ràng có thể sử dụng 'chiều rộng: 100%' nhưng tôi sử dụng cái gì cho chiều cao? Tôi có thể đặt chiều cao cố định ngẫu nhiên như 150px và sau đó tôi có thể thấy 150px trên cùng của hình ảnh nhưng đây không phải là giải pháp vì không có chiều cao cố định. Tôi đã có một vở kịch và thấy rằng một khi có chiều cao (thử nghiệm với 150px) tôi có thể sử dụng 'background-size: 100%' để phù hợp với hình ảnh trong div một cách chính xác. Tôi có thể sử dụng CSS3 gần đây hơn cho dự án này vì nó chỉ nhắm vào thiết bị di động.

Tôi đã thêm một ví dụ thô bên dưới. Xin vui lòng tha thứ cho phong cách nội tuyến nhưng tôi muốn đưa ra một ví dụ cơ bản để thử và làm cho câu hỏi của tôi rõ ràng hơn một chút.

<div id="image-container"> 
    <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div> 
</div> 

Tôi có thể phải cung cấp cho vùng chứa div chiều cao phần trăm dựa trên toàn bộ trang hoặc tôi đang xem điều này hoàn toàn sai?

Ngoài ra, bạn có nghĩ rằng nền CSS là cách tốt nhất để làm điều này không? Có thể có một kỹ thuật phục vụ các thẻ img khác nhau dựa trên chiều rộng thiết bị/màn hình. Ý tưởng chung là mẫu trang đích sẽ được sử dụng nhiều lần với các hình ảnh sản phẩm khác nhau vì vậy tôi cần đảm bảo rằng tôi phát triển theo cách tốt nhất có thể.

Tôi xin lỗi vì điều này hơi dài nhưng tôi quay lại từ dự án này đến dự án tiếp theo nên tôi muốn hoàn thành công việc này. Cảm ơn trước cho thời gian của bạn, nó được nhiều đánh giá cao. Kính trọng

Answer 1

Thay vì sử dụng background-image bạn có thể sử dụng img trực tiếp và để có được những hình ảnh để truyền bá tất cả các chiều rộng của khung nhìn thử sử dụng max-width:100%; và hãy nhớ không áp dụng bất kỳ đệm hoặc lề để div container chính của bạn khi họ sẽ tăng tổng chiều rộng của container. Sử dụng quy tắc này, bạn có thể có chiều rộng hình ảnh bằng với chiều rộng của trình duyệt và chiều cao cũng sẽ thay đổi theo tỷ lệ khung hình. Cảm ơn.

Chỉnh sửa: Thay đổi hình ảnh trên kích thước khác nhau của cửa sổ

$(window).resize(function(){ 
 
    var windowWidth = $(window).width(); 
 
    var imgSrc = $('#image'); 
 
    if(windowWidth <= 400){ \t \t \t 
 
    imgSrc.attr('src','http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a'); 
 
    } 
 
    else if(windowWidth > 400){ 
 
    imgSrc.attr('src','http://i.stack.imgur.com/oURrw.png'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="image-container"> 
 
    <img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt=""/> 
 
</div>

Bằng cách này bạn thay đổi hình ảnh của bạn có kích thước khác nhau của trình duyệt.

Answer 2

Bạn có thể sử dụng thuộc tính CSS background-size và đặt thành cover hoặc contain, tùy thuộc vào tùy chọn của bạn. Bìa sẽ bao gồm toàn bộ cửa sổ, trong khi chứa sẽ làm cho một bên phù hợp với cửa sổ do đó không bao gồm toàn bộ trang (trừ khi tỷ lệ khung hình của màn hình bằng với hình ảnh).

Xin lưu ý rằng đây là thuộc tính CSS3. Trong các trình duyệt cũ hơn, thuộc tính này bị bỏ qua. Ngoài ra, bạn có thể sử dụng javascript để thay đổi cài đặt CSS tùy thuộc vào kích thước cửa sổ, nhưng điều này không được ưu tiên.

body { 
    background-image: url(image.jpg); /* image */ 
    background-position: center;  /* center the image */ 
    background-size: cover;   /* cover the entire window */ 
} 

Answer 3

Tim S. gần hơn với câu trả lời "chính xác", sau đó câu trả lời hiện được chấp nhận. Nếu bạn muốn có hình nền chiều rộng, chiều cao thay đổi 100% được thực hiện bằng CSS, thay vì sử dụng cover (điều này sẽ cho phép hình ảnh mở rộng ra từ hai bên) hoặc contain (không cho phép hình ảnh mở rộng ra) , chỉ cần đặt CSS như vậy:

body { 
    background-image: url(img.jpg); 
    background-position: center top; 
    background-size: 100% auto; 
} 

Điều này sẽ đặt hình nền của bạn thành chiều rộng 100% và cho phép chiều cao tràn. Bây giờ bạn có thể sử dụng các truy vấn phương tiện để hoán đổi hình ảnh đó thay vì dựa vào JavaScript.

CHỈNH SỬA: Tôi vừa mới nhận ra (3 tháng sau) rằng bạn có thể không muốn hình ảnh bị tràn; dường như bạn muốn phần tử vùng chứa thay đổi kích thước dựa trên hình nền của nó (để giữ nguyên tỷ lệ khung hình), điều này là không thể với CSS theo như tôi biết.

Hy vọng rằng bạn sẽ sớm có thể sử dụng thuộc tính srcset mới trên phần tử img. Nếu bạn muốn sử dụng img yếu tố ngay bây giờ, câu trả lời hiện được chấp nhận có lẽ là tốt nhất.

Tuy nhiên, bạn có thể tạo phần tử hình ảnh nền đáp ứng với tỷ lệ khung hình không đổi bằng cách sử dụng thuần CSS. Để làm điều này, bạn đặt height 0 và thiết lập các padding-bottom đến một tỷ lệ phần trăm của chiều rộng riêng của phần tử, như vậy:

.foo { 
    height: 0; 
    padding: 0; /* remove any pre-existing padding, just in case */ 
    padding-bottom: 75%; /* for a 4:3 aspect ratio */ 
    background-image: url(foo.png); 
    background-position: center center; 
    background-size: 100%; 
    background-repeat: no-repeat; 
} 

Để sử dụng tỉ lệ màn hình khác nhau, chia chiều cao của hình ảnh ban đầu của nó có chiều rộng riêng và nhân với 100 để nhận giá trị phần trăm. Điều này làm việc bởi vì tỷ lệ phần trăm đệm luôn luôn được tính toán dựa trên chiều rộng, ngay cả khi nó là đệm dọc.

Answer 4

thử này

html { 
    background: url(image.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
     -o-background-size: cover; 
      background-size: cover; 
} 

Answer 5

Chỉ cần sử dụng một hình nền hai màu:

<div style="width:100%; background:url('images/bkgmid.png'); 
     background-size: cover;"> 
content 
</div> 

Answer 6

Thêm css:

html,body{ 
     height:100%; 
     } 
    .bg-img { 
     background: url(image.jpg) no-repeat center top; 
     background-size: cover; 
     height:100%;  
    } 

Và html là:

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

CSS: stretching background image to 100% width and height of screen?

Answer 7

Đó là năm 2017 và giờ bạn có thể sử dụng object-fit có decent support. Nó hoạt động theo cách tương tự như background-size của div nhưng trên chính phần tử đó và trên bất kỳ phần tử nào kể cả hình ảnh.

.your-img { 
    max-width: 100%; 
    max-height: 100%; 
    object-fit: contain; 
}