IT story

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

hot-time 2020. 4. 11. 10:15
반응형

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가 필요한 경우 왜 <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 솔루션이 있습니다.

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

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

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

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

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

그리고 아이디어는 div 안에 IMG 태그와 동일한 이미지를 넣지 만 가시성을 제공합니다. 숨겨진 + 상대 위치로 재생 +이 div에 이미지를 배경으로 제공하십시오.

나는이 문제가 있었고 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>

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 이벤트 리스너를 추가 한 다음 종횡비를 기반으로 영웅 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;"

참고 URL : https://stackoverflow.com/questions/600743/how-to-get-div-height-to-auto-adjust-to-background-size

반응형

'IT story' 카테고리의 다른 글

ViewPager에서 조각 검색  (0) 2020.04.11
Java로 파일을 재귀 적으로 나열  (0) 2020.04.11
장치를 컴파일 할 때 Apple Mach-O 링커 오류  (0) 2020.04.11
해시에서 문자열을 기호로 변환하는 가장 좋은 방법  (0) 2020.04.11
PHP에서 문자열의 첫 문자를 제거하는 방법?  (0) 2020.04.11

'IT story'의 다른글

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

관련글

댓글

티스토리툴바