div 높이를 배경 크기로 자동 조정하는 방법은 무엇입니까?

특정 높이 (또는 최소 높이)를 설정하지 않고 설정된 배경의 크기에 자동으로 div를 조정하려면 어떻게합니까?

다른 비효율적 인 해결책은로 img설정된 요소 아래에 이미지를 포함시키는 것 visibility: hidden;입니다. 그런 다음 background-image주변 div를 이미지와 동일하게 만듭니다.

주변 div를 img요소 의 이미지 크기로 설정 하지만 배경으로 표시합니다.

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

배경 이미지를 img요소 처럼 작동 시켜 height자동으로 조정 하는 아주 좋고 멋진 방법이 있습니다. 이미지 width와 height비율 을 알아야합니다 . 내용물 height을 0으로 컨테이너를 설정하고 padding-top, 화상 비율에 기초하여 같은 비율.

다음과 같이 보일 것입니다 :

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) */
}

당신은 img 요소처럼 작동하는 자동 높이를 가진 배경 이미지를 얻었습니다. 다음은 작동하는 프로토 타입입니다 (div 크기를 조정하고 div 높이를 확인할 수 있음). http://jsfiddle.net/TPEFn/2/

CSS를 사용하여 배경 이미지 크기를 자동으로 조정할 수있는 방법이 없습니다.

다른 사람들이 언급했듯이 서버의 배경 이미지를 측정 한 다음 해당 속성을 div에 적용하여 해킹 할 수 있습니다.

이미지 크기에 따라 div 크기를 조정하기 위해 일부 자바 스크립트를 해킹 할 수도 있습니다 (이미지가 다운로드되면)-이것은 기본적으로 동일합니다.

이미지를 자동 맞추기 위해 div가 필요한 경우 div <img>안에 태그를 넣지 않는 이유는 무엇입니까?

이 답변은 다른 답변과 비슷하지만 전반적으로 대부분의 응용 프로그램에 가장 적합합니다. 당신이 일반적으로하는 손 전에 이미지 크기를 알아야합니다. 이렇게하면 이미지의 음수 패딩이나 절대 위치없이 오버레이 텍스트, 제목 등을 추가 할 수 있습니다. 아래 예와 같이 패딩 %를 이미지 종횡비와 일치하도록 설정하는 것이 중요합니다. 나는 이 답변을 사용 했고 본질적으로 이미지 배경을 추가했습니다.

.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>

아마도 이것이 도움이 될 수 있습니다. 정확한 배경은 아니지만 아이디어를 얻습니다.

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

확실히 여기까지 내려 가지 않을 것입니다. 그러나 문제가 내 것과 같으면 이것이 내 해결책이었습니다.

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

나는 이미지의 중심에 div를 갖고 싶었고 이것이 가능할 것입니다.

다른 답변이 놓친 순수한 CSS 솔루션이 있습니다.

"content :"속성은 주로 텍스트 내용을 요소에 삽입하는 데 사용되지만 이미지 내용을 삽입하는 데에도 사용할 수 있습니다.

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

그러면 div의 높이가 이미지의 실제 픽셀 크기로 조정됩니다. 너비도 조정하려면 다음을 추가하십시오.

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

서버 측에서 할 수 있습니다 : 이미지를 측정 한 다음 div 크기를 설정하거나 JS로 이미지를로드하고 속성을 읽은 다음 DIV 크기를 설정하십시오.

그리고 여기 아이디어가 있습니다 .div 안에 동일한 이미지를 IMG 태그와 같이 넣으십시오.

나는이 문제가 있었고 Hasanavi의 대답을 찾았지만 와이드 스크린에 배경 이미지를 표시 할 때 약간의 버그가 발생했습니다. 배경 이미지가 화면의 전체 너비로 퍼지지 않았습니다.

그래서 여기 내 솔루션이 있습니다-Hasanavi의 코드를 기반으로하지만 더 좋습니다 ... 그리고 이것은 여분의 와이드 스크린과 모바일 스크린 모두에서 작동합니다.

/*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) */
    }
}

당신이 눈치 챘을 수도로, background-size: contain;속성 DOAS는 여분의 넓은 화면에서 잘 맞지 않는, 그리고 background-size: cover;나는이 사용되도록 속성이 모바일 화면에 잘 맞지 않는 @media화면 크기에 놀러와이 문제를 해결하기 위해 속성을.

이건 어때요 :)

.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>

데모 : http://jsfiddle.net/josephmcasey/KhPaF/

미리 결정된 단일 배경 이미지이고 배경 이미지의 가로 세로 비율을 왜곡하지 않고 div가 반응하도록하려면 먼저 이미지의 가로 세로 비율을 계산 한 후 다음을 수행하여 가로 세로 비율을 유지하는 div를 만들 수 있습니다 :

가로 세로 비율이 4/1이고 div의 너비가 32 %라고 가정하십시오.

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

이는 패딩이 포함 요소의 너비에 따라 계산된다는 사실에서 비롯됩니다.

이것이 도움이 될 수 있습니다. 정확한 배경은 아니지만 간단한 아이디어를 얻습니다.

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

당신은 그런 것을 할 수 있습니다

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

빌드 타임에 이미지의 비율을 알고 창 높이를 기준으로 높이를 원하고 최신 브라우저 (IE9 +)를 타겟팅 하고 싶다면 뷰포트 단위를 사용할 수 있습니다.

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

OP가 요구하는 것은 아니지만이 질문을 보는 많은 사람들에게 적합 할 수 있으므로 여기에 다른 옵션을 제공하고 싶었습니다.

피들 : https://jsfiddle.net/6Lkzdnge/

나는 해결책 중 일부를 보았고 훌륭하지만 놀랍도록 쉬운 방법을 찾았습니다.

먼저 배경 이미지에서 비율을 가져와야합니다. 우리는 단순히 한 차원을 다른 차원으로 나눕니다. 그런 다음 66.4 %와 같은 것을 얻습니다.

이미지 비율이 있으면 뷰포트 너비에 비율을 곱하여 div 높이를 간단히 계산할 수 있습니다.

height: calc(0.664 * 100vw);

나에게 그것은 작동하고 div 높이를 올바르게 설정하고 창 크기를 조정할 때 변경합니다.

다음과 같은 것이 있다고 가정하십시오.

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

배경을 추가하고 싶지만 이미지의 크기를 모릅니다.

비슷한 문제가 있었고 그리드를 사용하여 문제를 해결했습니다.

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-index실제로 배경에 이미지를 배치하기위한 img.background것 div.content입니다.

참고 : div.content사진의 높이가 같을 수 있으므로 높이 div.content에 따라 배치 된 자식이있는 경우 '자동'과 다른 숫자를 설정해야 할 수 있습니다.

Umbraco CMS에서이 문제가 발생했으며이 시나리오에서는 div의 'style'속성에 다음과 같은 것을 사용하여 div에 이미지를 추가 할 수 있습니다.

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

나는이 문제를 잠시 다루어 왔으며이 문제를 해결하기 위해 jquery 플러그인을 작성하기로 결정했습니다. 이 플러그인은 "show-bg"클래스가있는 모든 요소를 ​​찾거나 자신의 선택기에 전달할 수 있으며 배경 이미지 크기를 계산합니다. 이 코드를 포함시키기 만하면 원하는 요소를 class = "show로 표시 할 수 있습니다.

즐겨!

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

내가 생각할 수있는 가장 좋은 해결책은 너비와 높이를 백분율로 지정하는 것입니다. 모니터 크기에 따라 화면을 정리할 수 있습니다. 반응성이 뛰어난 레이아웃 ..

예를 들어. 당신은 가지고

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

반응 형 레이아웃을 원할 경우 가장 좋은 옵션입니다 .float는 권장하지 않습니다. 일부 경우 float는 사용하는 것이 좋습니다. 그러나 대부분의 경우 크로스 브라우저 테스트를 수행 할 때 float은 많은 수의 항목에 영향을 미치므로 float 사용을 피하십시오.

도움이 되었기를 바랍니다 :)

실제로 방법을 알면 매우 쉽습니다.

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

트릭은 닫힌 div를 배경 차원 값과 동일한 차원 값 (이 예에서는 100 % 및 40vw)을 가진 일반 div처럼 설정하는 것입니다.

jQuery를 사용 하여이 문제를 해결했습니다. 새로운 CSS 규칙이 이러한 유형의 동작을 기본적으로 허용 할 때까지는 이것이 최선의 방법이라고 생각합니다.

사업부 설정

아래에는 배경을 표시하려는 div가 있고 ( "영웅") 배경 이미지 위에 오버레이하려는 내부 내용 / 텍스트 ( "내부")가 있습니다. 인라인 스타일을 영웅 클래스로 옮길 수 있습니다. 어떤 스타일이 적용되는지 빠르고 쉽게 확인할 수 있도록 여기에 그대로 두었습니다.

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

이미지 종횡비 계산

그런 다음 이미지의 높이를 너비로 나누어 이미지의 가로 세로 비율을 계산하십시오. 예를 들어 이미지 높이가 660이고 너비가 1280 인 경우 가로 세로 비율은 0.5156입니다.

높이를 조정하기 위해 jQuery 창 크기 조정 이벤트 설정

마지막으로, 창 크기 조정을위한 jQuery 이벤트 리스너를 추가 한 다음 종횡비를 기반으로 hero div의 높이를 계산하고 업데이트하십시오. 이 솔루션은 일반적으로 종횡비를 사용한 불완전한 계산으로 인해 맨 아래에 여분의 픽셀을 남기므로 결과 크기에 -1을 추가합니다.

$(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);
}

페이지로드시 작동하는지 확인

처음에 이미지 크기가 계산되도록 페이지가로드 될 때 위의 크기 조정 호출을 수행해야합니다. 그렇지 않으면 창 크기를 조정할 때까지 hero div가 조정되지 않습니다. 크기 조정을 위해 별도의 기능을 설정했습니다. 내가 사용하는 전체 코드는 다음과 같습니다.

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

기본 레이어의 불투명도가 1 정도이고 기본적으로 투명한 Photoshop에서 이미지를 만들 수있는 경우 해당 이미지를 div에 넣은 다음 실제 그림을 배경 이미지로 만듭니다. 그런 다음 img의 불투명도를 1로 설정하고 원하는 크기 치수를 추가하십시오.

그 사진은 그런 식으로 이루어지며 보이지 않는 이미지를 멋진 페이지로 끌 수도 없습니다.

그냥 추가 div

style="overflow:hidden;"