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

StackOverflow https://stackoverflow.com/questions/600743

  •  03-07-2019
  •  | 
  •  

문제

특정 높이(또는 최소 높이)를 설정하지 않고 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 높이 크기를 조정하고 확인할 수 있음). http://jsfiddle.net/tpefn/2/

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

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

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

이미지를 자동으로 맞추기 위해 DIV가 필요하면 왜 <img> DIV 내부에 태그가 있습니까?

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

.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 솔루션이 있습니다.

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

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

이로 인해 DIV가 높이가 이미지의 실제 픽셀 크기로 크기를 조정하게됩니다. 너비도 크기를 조정하려면 다음을 추가하십시오.

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

IT 서버 측면 : 이미지를 측정 한 다음 DIV 크기를 설정하거나 JS로 이미지를로드하여 속성을 읽은 다음 DIV 크기를 설정합니다.

그리고 여기에 아이디어가 있습니다. DIV 내부에 IMG 태그와 동일한 이미지를 넣으십시오. 그러나 가시성을 제공하십시오. Hidden + Position Relative + Phote + Position relative +이 이미지를 배경으로 제공하십시오.

이 문제가 있었고 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; 부동산 DOA는 여분의 넓은 화면에서 잘 맞지 않으며 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>

Umbraco CMS와 관련 하여이 문제가 있었고이 시나리오에서 DIV의 '스타일'속성에 대해 이와 같은 것을 사용하여 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를 사용하지 않습니다.

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

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

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

트릭은 배경 치수 값 (이 예에서 100% 및 40VW)과 동일한 치수 값을 가진 정상적인 div로 동봉 된 div를 설정하는 것입니다.

jQuery를 사용하여 이것을 해결했습니다. 새로운 CSS 규칙이 이러한 유형의 행동을 기본적으로 허용 할 때까지 나는 그것이 가장 좋은 방법이라는 것을 알게됩니다.

DIV를 설정하십시오

아래에는 배경이 ( "영웅")에 나타나기를 원하는 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 창 크기 조정 이벤트를 설정하여 높이를 조정하십시오

마지막으로 Window Resize의 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에서 이미지를 만들 수 있다면 해당 IMG를 DIV에 넣은 다음 실제 그림을 배경 이미지로 만드십시오. 그런 다음 IMG의 불투명도를 1로 설정하고 원하는 크기 치수를 추가하십시오.

그 사진은 그런 식으로 완성되며, 보이지 않는 이미지를 페이지에서 끌어 낼 수는 없습니다.

그냥 추가하십시오 div 

style="overflow:hidden;"
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top