Hình nền chiều rộng 100% với chiều cao 'tự động'

Tôi hiện đang làm việc trên trang đích di động cho một công ty. Đó là một bố cục thực sự cơ bản nhưng bên dưới tiêu đề có hình ảnh của một sản phẩm sẽ luôn có chiều rộng 100% (thiết kế cho thấy 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 mà 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 là 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 để cung cấp các hình ảnh khác nhau dựa trên các độ phân giải khác nhau - giả sử nhỏ, vừa và một phiên bản lớn của cùng một hình ảnh, chẳng hạn. Tôi biết bạn không thể thay đổi img src bằng CSS vì vậy tôi nghĩ 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 cho điều này hoạt động bình thường 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 'width: 100%' nhưng tôi sử dụng gì cho chiều cao? Tôi có thể đặt mộ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 đã chơi thử và thấy rằng khi có chiều cao (được thử nghiệm với 150px), tôi có thể sử dụng 'background-size: 100%' để khớp hình ảnh trong div một cách chính xác. Tôi có thể sử dụng CSS3 mới hơn cho dự án này vì nó chỉ nhắm đến thiết bị di động.

Tôi đã thêm một ví dụ sơ bộ bên dưới. Xin thứ lỗi cho các kiểu 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 phần trăm chiều cao div của vùng chứa dựa trên toàn bộ trang hay tôi đang nhìn đ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? Có thể có một kỹ thuật phân phát các thẻ img khác nhau dựa trên thiết bị / chiều rộng 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 mình phát triển mẫu này theo cách tốt nhất có thể.

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

Thay vì sử dụng, background-imagebạn có thể sử dụng imgtrực tiếp và để hình ảnh trải rộng toàn bộ chiều rộng của khung nhìn, hãy thử sử dụng max-width:100%;và hãy nhớ không áp dụng bất kỳ phần đệm hoặc lề nào cho div vùng chứa chính của bạn vì chúng sẽ làm tăng tổng chiều rộng của vùng chứa. Sử dụng quy tắc này, bạn có thể có chiều rộng hình ảnh bằng 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 các 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){			
    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 mình ở kích thước khác nhau của trình duyệt.

Tim S. đã tiến gần đến câu trả lời "đúng" hơn câu trả lời hiện được chấp nhận. Nếu bạn muốn có hình nền 100% chiều rộng, chiều cao thay đổi đượ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ừ các 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 100% chiều rộng và cho phép chiều cao tràn ra. Giờ đây, 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 nhận ra (3 tháng sau) rằng bạn có thể không muốn hình ảnh tràn; bạn dường như 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ó (để bảo toàn tỷ lệ co), điều này không thể thực hiện được 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 imgphần tử. Nếu bạn muốn sử dụng imgcác phần 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 nền đáp ứng với tỷ lệ khung hình không đổi bằng cách sử dụng CSS thuần túy. Để làm điều này, bạn đặt thành height0 và đặt thành padding-bottomphần trăm chiều rộng của phần tử, như sau:

.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 các tỷ lệ khung hình khác nhau, hãy chia chiều cao của hình ảnh gốc cho chiều rộng của chính nó và nhân với 100 để có giá trị phần trăm. Điều này hoạt động vì phần trăm đệm luôn được tính dựa trên chiều rộng, ngay cả khi đó là phần đệm dọc.

Thử đi

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;
}

Phiên bản đơn giản hóa

html {
  background: url(image.jpg) center center / cover no-repeat fixed;
}

Bạn có thể sử dụng thuộc tính CSS background-sizevà đặt nó thành coverhoặc contain, tùy thuộc vào sở thích của bạn. Cover sẽ che toàn bộ cửa sổ, trong khi hàm chứa sẽ làm cho một mặt vừa với cửa sổ, do đó không che 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 */
}

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

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

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: kéo hình nền đến 100% chiều rộng và chiều cao của màn hình?

Đó là năm 2017 và bây giờ bạn có thể sử dụng object-fit có hỗ trợ tốt . Nó hoạt động theo cách tương tự như div background-sizenhưng trên chính phần tử và trên bất kỳ phần tử nào bao gồm cả hình ảnh.

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

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