Làm cách nào để có chiều cao div để tự động điều chỉnh kích thước nền?

Làm cách nào để có một div tự động điều chỉnh theo kích thước của nền mà tôi đặt cho nó mà không đặt chiều cao cụ thể (hoặc chiều cao tối thiểu) cho nó?

Một giải pháp khác, có lẽ không hiệu quả, sẽ bao gồm hình ảnh dưới một imgyếu tố được đặt thành visibility: hidden;. Sau đó làm cho background-imagediv xung quanh giống như hình ảnh.

Điều này sẽ đặt div xung quanh thành kích thước của hình ảnh trong thành imgphần nhưng hiển thị nó dưới dạng nền.

<div style="background-image: url(http://your-image.jpg);">
 <img src="http://your-image.jpg" style="visibility: hidden;" />
</div>

Có một cách rất hay và thú vị để làm cho hình ảnh nền hoạt động giống như một imgyếu tố để nó heighttự động điều chỉnh . Bạn cần biết hình ảnh widthvà heighttỷ lệ. Đặt heighthộp chứa thành 0 và đặt padding-toptỷ lệ phần trăm dựa trên tỷ lệ hình ảnh.

Nó sẽ trông như sau:

div {
    background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 66.64%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
}

Bạn vừa có một hình ảnh nền với chiều cao tự động sẽ hoạt động giống như một phần tử img. Đây là một nguyên mẫu hoạt động (bạn có thể thay đổi kích thước và kiểm tra chiều cao div): http://jsfiddle.net/TPEFn/2/

Không có cách nào để tự động điều chỉnh kích thước hình nền bằng CSS.

Bạn có thể hack xung quanh nó bằng cách đo hình nền trên máy chủ và sau đó áp dụng các thuộc tính đó cho div, như những người khác đã đề cập.

Bạn cũng có thể hack một số javascript để thay đổi kích thước div dựa trên kích thước hình ảnh (một khi hình ảnh đã được tải xuống) - về cơ bản là điều tương tự.

Nếu bạn cần div của mình để tự động điều chỉnh hình ảnh, tôi có thể hỏi tại sao bạn không đặt một <img>thẻ bên trong div của mình?

Câu trả lời này tương tự với những người khác, nhưng nói chung là tốt nhất cho hầu hết các ứng dụng. Bạn cần phải biết kích thước hình ảnh trước khi bàn tay mà bạn thường làm. Điều này sẽ cho phép bạn thêm văn bản lớp phủ, tiêu đề, vv mà không có phần đệm âm hoặc định vị tuyệt đối của hình ảnh. Chìa khóa của chúng là đặt% đệm để phù hợp với tỷ lệ khung hình của hình ảnh như trong ví dụ bên dưới. Tôi đã sử dụng câu trả lời này và về cơ bản chỉ cần thêm một hình ảnh nền.

.wrapper {
  width: 100%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
  background-size: contain;
  background: url('https://upload.wikimedia.org/wikipedia/en/thumb/6/67/Wiki-llama.jpg/1600px-Wiki-llama.jpg') top center no-repeat;
  margin: 0 auto;
}
.wrapper:after {
  padding-top: 75%;
  /* this llama image is 800x600 so set the padding top % to match 600/800 = .75 */
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  color: black;
  text-align: center;
  margin-top: 5%;
}

<div class="wrapper">
  <div class="main">
    This is where your overlay content goes, titles, text, buttons, etc.
  </div>
</div>

Có lẽ điều này có thể giúp ích, nó không chính xác là một nền tảng, nhưng bạn có ý tưởng:

<style>
div {
    float: left;
    position: relative;
}
div img {
    position: relative;
}

div div {
    position: absolute;
    top:0;
    left:0;
}
</style>

<div>
    <img src="http://antwrp.gsfc.nasa.gov/apod/image/0903/omegacen_davis.jpg" />
    <div>Hi there</div>
</div>

Khá chắc chắn rằng điều này sẽ không bao giờ được nhìn thấy tất cả các cách xuống đây. Nhưng nếu vấn đề của bạn giống như của tôi, thì đây là giải pháp của tôi:

.imaged-container{
  background-image:url('<%= asset_path("landing-page.png") %> ');
  background-repeat: no-repeat;
  background-size: 100%;
  height: 65vw;
}

Tôi muốn có một div ở trung tâm của hình ảnh, và điều này sẽ cho phép tôi về điều đó.

Có một giải pháp CSS thuần túy mà các câu trả lời khác đã bỏ lỡ.

Thuộc tính "content:" chủ yếu được sử dụng để chèn nội dung văn bản vào một phần tử, nhưng cũng có thể được sử dụng để chèn nội dung hình ảnh.

.my-div:before {
    content: url("image.png");
}

Điều này sẽ khiến div thay đổi kích thước chiều cao của nó thành kích thước pixel thực của hình ảnh. Để thay đổi kích thước chiều rộng quá, thêm:

.my-div {
    display: inline-block;
}

Bạn có thể thực hiện phía máy chủ: bằng cách đo hình ảnh và sau đó đặt kích thước div, HOẶC tải hình ảnh bằng JS, đọc thuộc tính của nó và sau đó đặt kích thước DIV.

Và đây là một ý tưởng, đặt cùng một hình ảnh bên trong div như một thẻ IMG, nhưng cung cấp cho nó khả năng hiển thị: hidden + play với vị trí tương đối + cung cấp cho div hình ảnh này làm nền.

Tôi gặp vấn đề này và tìm thấy câu trả lời của Hasanavi nhưng tôi gặp một lỗi nhỏ khi hiển thị hình nền trên màn hình rộng - Hình nền không lan ra toàn bộ chiều rộng của màn hình.

Vì vậy, đây là giải pháp của tôi - dựa trên mã của Hasanavi nhưng tốt hơn ... và điều này sẽ hoạt động trên cả màn hình cực rộng và di động.

/*WIDE SCREEN SUPPORT*/
@media screen and (min-width: 769px) { 
    div {
        background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 0;
        padding-top: 66.64%; /* (img-height / img-width * container-width) */
                    /* (853 / 1280 * 100) */
    }
}

/*MOBILE SUPPORT*/
@media screen and (max-width: 768px) {
    div {
        background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 0;
        padding-top: 66.64%; /* (img-height / img-width * container-width) */
                    /* (853 / 1280 * 100) */
    }
}

Như bạn có thể nhận thấy, background-size: contain;doas thuộc tính không phù hợp với màn hình rộng hơn và thuộc background-size: cover;tính không phù hợp với màn hình di động nên tôi đã sử dụng @mediathuộc tính này để xử lý các kích thước màn hình và khắc phục vấn đề này.

Còn cái này thì sao :)

.fixed-centered-covers-entire-page{
    margin:auto;
    background-image: url('https://i.imgur.com/Ljd0YBi.jpg');
    background-repeat: no-repeat;background-size:cover;
    background-position: 50%;
    background-color: #fff;
    left:0;
    right:0;
    top:0;
    bottom:0;
    z-index:-1;
    position:fixed;
}

<div class="fixed-centered-covers-entire-page"></div>

Bản trình diễn: http://jsfiddle.net/josephmcasey/KhPaF/

Nếu đó là một hình nền được xác định trước duy nhất và bạn muốn div phản ứng nhanh mà không làm biến dạng tỷ lệ khung hình của hình nền, trước tiên bạn có thể tính tỷ lệ khung hình của hình ảnh và sau đó tạo một div giữ tỷ lệ khung hình bằng cách làm như sau :

Giả sử bạn muốn tỷ lệ khung hình là 4/1 và chiều rộng của div là 32%:

div {
  width: 32%; 
  padding-bottom: 8%; 
}

Kết quả này xuất phát từ thực tế là phần đệm được tính dựa trên chiều rộng của phần tử chứa.

Điều này có thể giúp ích, nó không chính xác là một nền tảng, nhưng bạn có được ý tưởng đơn giản

    <style>
div {
    float: left;
    position: relative;
}
div img {
    position: relative;
}

div div {
    position: absolute;
    top:0;
    left:0;
}
</style>

<div>
    <img src="http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg" />
    <div>Hello</div>
</div>

Bạn có thể làm một cái gì đó như thế

<div style="background-image: url(http://your-image.jpg); position:relative;">
 <img src="http://your-image.jpg" style="opacity: 0;" />
<div style="position: absolute;top: 0;width: 100%;height: 100%;">my content goes here</div>
</div>

Nếu bạn biết tỷ lệ của hình ảnh tại thời điểm xây dựng, muốn chiều cao dựa trên chiều cao cửa sổ và bạn đang nhắm mục tiêu các trình duyệt hiện đại (IE9 +) , thì bạn có thể sử dụng các đơn vị chế độ xem cho việc này:

.width-ratio-of-height {
  overflow-x: scroll;
  height: 100vh;
  width: 500vh; /* width here is 5x height */
  background-image: url("http://placehold.it/5000x1000");
  background-size: cover;
}

Không hoàn toàn những gì OP đang hỏi, nhưng có lẽ phù hợp với nhiều người đang xem câu hỏi này, vì vậy muốn đưa ra một lựa chọn khác ở đây.

Fiddle: https://jsfiddle.net/6Lkzdnge/

Giả sử bạn có một số thứ như thế này:

<div class="content">
    ... // inner HTML
</div>

và bạn muốn thêm một nền cho nó, nhưng bạn không biết kích thước của hình ảnh.

Tôi đã có một vấn đề tương tự, và tôi đã giải quyết nó bằng cách sử dụng lưới:

HTML

<div class="outer">
    <div class="content">
        ... // inner HTML
    </div>
    <img class="background" />
</div>

CSS

.outer{
    display: grid;
    grid-template: auto / auto;
    // or you can assign a name for this block
}
.content{
    grid-area: 1 / 1 / 2 / 2;
    z-index: 2;
}
.background{
    grid-area: 1 / 1 / 2 / 2;
    z-index: 1;
}

z-indexchỉ để đặt hình ảnh thực sự ở nền, tất nhiên bạn có thể đặt img.backgroundphía trên div.content.

LƯU Ý : nó có thể khiến div.contentchiều cao của hình ảnh có cùng chiều cao, vì vậy nếu div.contentcó bất kỳ con nào được đặt theo chiều cao của nó, bạn có thể muốn đặt một số không phải là 'tự động'.

Có vấn đề này với Umbraco CMS và trong kịch bản này, bạn có thể thêm hình ảnh vào div bằng cách sử dụng cái gì đó như thế này cho thuộc tính 'style' của div:

style="background: url('@(image.mediaItem.Image.umbracoFile)') no-repeat scroll 0 0 transparent; height: @(image.mediaItem.Image.umbracoHeight)px"

Tôi đã xử lý vấn đề này được một thời gian và quyết định viết một plugin jquery để giải quyết vấn đề này. Plugin này sẽ tìm thấy tất cả các yếu tố với lớp "show-bg" (hoặc bạn có thể vượt qua nó bộ chọn của riêng bạn) và tính toán kích thước hình nền của chúng. tất cả những gì bạn phải làm là bao gồm mã này, đánh dấu các phần tử mong muốn bằng class = "show

Thưởng thức!

https://bitbucket.org/tomeralmog/jquery.heightfrombg

Giải pháp tốt nhất tôi có thể nghĩ đến là bằng cách chỉ định chiều rộng và chiều cao của bạn theo phần trăm. Điều này sẽ cho phép bạn đánh giá lại màn hình dựa trên kích thước màn hình của bạn. bố trí đáp ứng nhiều hơn ..

Cho một ví dụ. bạn có

<br/>
<div> . //This you set the width percent to %100
    <div> //This you set the width percent to any amount . if you put it by 50% , it will be half
    </div>
 </div>

Đây là tùy chọn tốt nhất nếu bạn muốn bố trí đáp ứng, tôi không khuyên bạn nên sử dụng float, trong một số trường hợp nhất định, float là ổn để sử dụng. nhưng trong hầu hết các trường hợp, chúng tôi tránh sử dụng float vì nó sẽ ảnh hưởng đến khá nhiều thứ khi bạn đang thực hiện kiểm tra trình duyệt chéo.

Hi vọng điêu nay co ich :)

Tôi đã xem xét một số giải pháp và chúng rất tuyệt nhưng tôi nghĩ rằng tôi đã tìm thấy một cách dễ dàng đáng ngạc nhiên.

Đầu tiên, chúng ta cần lấy tỷ lệ từ hình nền. Chúng tôi chỉ đơn giản là phân chia một chiều thông qua một chiều khác. Sau đó, chúng tôi nhận được một cái gì đó như ví dụ 66,4%

Khi chúng ta có tỷ lệ hình ảnh, chúng ta có thể chỉ cần tính chiều cao của div bằng cách nhân tỷ lệ với chiều rộng khung nhìn:

height: calc(0.664 * 100vw);

Đối với tôi, nó hoạt động, đặt đúng chiều cao div và thay đổi nó khi cửa sổ được thay đổi kích thước.

Thật ra nó khá dễ khi bạn biết cách làm:

<section data-speed='.618' data-type='background' style='background: url(someUrl) 
top center no-repeat fixed;  width: 100%; height: 40vw;'>
<div style='width: 100%; height: 40vw;'>
</div>
</section>

Thủ thuật chỉ là đặt div kèm theo giống như một div bình thường với các giá trị thứ nguyên giống như các giá trị thứ nguyên nền (trong ví dụ này là 100% và 40vw).

Tôi đã giải quyết điều này bằng cách sử dụng jQuery. Cho đến khi các quy tắc CSS mới cho phép loại hành vi này tự nhiên, tôi thấy đó là cách tốt nhất để thực hiện.

Thiết lập div của bạn

Bên dưới bạn có div của bạn mà bạn muốn nền xuất hiện trên ("anh hùng") và sau đó nội dung / văn bản bên trong bạn muốn phủ lên trên hình ảnh nền của bạn ("bên trong"). Bạn có thể (và nên) di chuyển các kiểu nội tuyến sang lớp anh hùng của mình. Tôi đã để chúng ở đây để nhanh chóng và dễ dàng xem phong cách nào được áp dụng cho nó.

<div class="hero" style="background-image: url('your-image.png'); background-size: 100%; background-repeat: no-repeat; width: 100%;">
    <div class="inner">overlay content</div>
</div>

Tính tỷ lệ khung hình ảnh

Tiếp theo tính tỷ lệ khung hình cho hình ảnh của bạn bằng cách chia chiều cao của hình ảnh cho chiều rộng. Ví dụ: nếu chiều cao hình ảnh của bạn là 660 và chiều rộng của bạn là 1280 thì tỷ lệ khung hình của bạn là 0,5156.

Thiết lập một sự kiện thay đổi kích thước cửa sổ jQuery để điều chỉnh chiều cao

Cuối cùng, thêm một trình lắng nghe sự kiện jQuery để thay đổi kích thước cửa sổ và sau đó tính chiều cao của div anh hùng của bạn dựa trên tỷ lệ khung hình và cập nhật nó. Giải pháp này thường để lại một pixel phụ ở phía dưới do tính toán không hoàn hảo sử dụng tỷ lệ khung hình để chúng tôi thêm -1 vào kích thước kết quả.

$(window).on("resize", function ()
{
    var aspect_ratio = .5156; /* or whatever yours is */
    var new_hero_height = ($(window).width()*aspect_ratio) - 1;
    $(".hero").height(new_hero_height);
}

Đảm bảo nó hoạt động khi tải trang

Bạn nên thực hiện cuộc gọi thay đổi kích thước ở trên khi tải trang để có kích thước hình ảnh được tính ngay từ đầu. Nếu bạn không, thì div div sẽ không điều chỉnh cho đến khi bạn thay đổi kích thước cửa sổ. Tôi thiết lập một chức năng riêng để thực hiện điều chỉnh thay đổi kích thước. Đây là mã đầy đủ tôi sử dụng.

function updateHeroDiv()
{
    var aspect_ratio = .5156; /* or whatever yours is */
    var new_hero_height = ($(window).width()*aspect_ratio) - 1;
    $(".hero").height(new_hero_height);
}

$(document).ready(function() 
{       
    // calls the function on page load
    updateHeroDiv(); 

    // calls the function on window resize
    $(window).on("resize", function ()
    {
        updateHeroDiv();        
    }
});

Nếu bạn có thể tạo một hình ảnh trên Photoshop trong đó lớp chính có độ mờ bằng 1 hoặc hơn và về cơ bản là trong suốt, hãy đặt img đó vào div và sau đó làm cho ảnh thật thành ảnh nền. THEN đặt độ mờ của img thành 1 và thêm kích thước kích thước bạn muốn.

Hình ảnh đó được thực hiện theo cách đó và thậm chí bạn không thể kéo hình ảnh vô hình ra khỏi trang tuyệt vời.

chỉ cần thêm vào div

style="overflow:hidden;"