div 높이를 배경 크기로 자동 조정하려면 어떻게 해야 합니까?

div 높이를 배경 크기로 자동 조정하려면 어떻게 해야 합니까?

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

배경 이미지가 마치 컴퓨터처럼 작동하도록 만드는 아주 멋지고 멋진 방법이 있습니다.img할 수 .height. 이미지를 알아야 .width그리고.height비율을 설정합니다.height합니다.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/8m9ur5qj/

또 다른, 아마도 비효율적인 해결책은 이미지를 아래에 포함시키는 것입니다.img가 정된요소로 visibility: hidden;그럼 그에음을 .background-image이미지와 동일한 주변 div.

가 렇게가주변하이설크정다니됩기로미의이지에 있는 의 크기로 됩니다.img요소이지만 배경으로 표시합니다.

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

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

다른 사람들이 언급한 것처럼 서버의 배경 이미지를 측정한 다음 해당 속성을 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>

몇 가지 해결책을 살펴봤는데 아주 훌륭하지만 의외로 쉬운 방법을 찾은 것 같습니다.

우선, 우리는 배경 이미지에서 비율을 얻어야 합니다.우리는 단순히 한 차원을 다른 차원으로 나눕니다.그러면 예를 들어 66.4%와 같은 것을 얻을 수 있습니다.

영상 비율이 있는 경우 비율에 뷰포트 너비를 곱하여 디브의 높이를 간단히 계산할 수 있습니다.

height: calc(0.664 * 100vw);

제게는, 그것이 작동하고, 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;
}

저는 영상의 중심에 디브를 두고 싶었습니다. 그러면 저는 그것을 할 수 있을 것입니다.

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

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

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

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

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

최근에 도입된 CSS 속성(~2020-2021)은 패딩 해킹 없이 이를 수행할 수 있는 좋은 방법이며 모든 에버그린 브라우저에서 지원됩니다.

이미지의 가로 세로 비율을 미리 알아야 하고, 많은 사용자의 경우 이미지 치수 비율을 미리 결정할 수 있기 때문에(그러나 항상 사용자 생성 콘텐츠에 대해서는 아님), 단일 스타일을 하드코드하거나 필요할 때 CSS를 인라인으로 연결할 수 있습니다.

aspect-ratio는 제공된 비율(또는 높이가 지정된 경우 너비)을 기준으로 너비를 지정할 때 높이를 계산합니다.

div {
    /*common ratio, like an 800*600px image */
    aspect-ratio: 3 / 2;
    /* computed height will be 133.33px, which is width/aspect-ratio */
    width: 200px;
    /* red BG for debugging so any image bleed is shown*/
    background: red; 
    background-image: url('https://images.unsplash.com/photo-1631163190830-8770a0ad4aa9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80');
}

<div></div>

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

그리고 여기 아이디어가 있습니다. IMG 태그와 같은 이미지를 디브 안에 넣으면서 가시성을 부여합니다. 숨겨진 이미지 + 위치 상대적인 플레이 + 이 디브의 배경 이미지를 제공합니다.

이 문제가 발생하여 하사나비의 답변을 찾았지만 넓은 화면에 배경 이미지를 표시할 때 작은 버그가 발생했습니다 - 배경 이미지가 화면 전체 너비로 퍼지지 않았습니다.

그래서 여기 내 해결책이 있습니다 - 하사나비의 코드에 기반하지만 더 나은...그리고 이것은 초광폭과 모바일 화면 모두에서 작동해야 합니다.

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

눈채셨지만겠치,▁as,background-size: contain;에서 잘 , 속은매넓화잘맞않지다습니서그고, 리성우에면은▁property▁do▁well고.background-size: cover;모바일 화면에 속성이 잘 맞지 않아서 이것을 사용했습니다.@media화면 크기를 재생하고 이 문제를 해결하기 위한 속성입니다.

효과적인 솔루션:

background-image: url("/assets/image_complete_path");
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover;
height: 100%;

미리 결정된 단일 배경 영상이고 배경 영상의 가로 세로 비율을 왜곡하지 않고 div가 응답하도록 하려면 먼저 영상의 가로 세로 비율을 계산한 다음 다음 다음을 수행하여 가로 세로 비율을 유지하는 div를 생성할 수 있습니다.

가로 세로 비율이 4/1이고 가로 세로 폭이 32%라고 가정합니다.

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

이는 포함 요소의 너비를 기준으로 패딩이 계산된다는 사실에서 비롯됩니다.

반대로 이미지를 메인 디브 안에 100% 폭으로 배치하여 디브와 이미지 모두 화면 크기에 반응하게 만들 것입니다.

그런 다음 주 디브 내부의 폭과 높이가 100%인 절대 위치 디브 내에 내용물을 추가합니다.

<div class="main" style="position: relative; width: 100%;">
    <img src="your_image.png" style="width: 100%;">
    <div style="position: absolute; width: 100%; height: 100%; display: flex...">
            YOUR CONTENT
    </div>
</div>

원래 승인된 답변에 스타일 너비를 100% 추가하면 내부 이미지에 스타일 너비를 추가할 수 있으므로 모바일 장치에 대해 자동으로 축소/확장할 수 있으며 모바일 보기에서 큰 위쪽 또는 아래쪽 여백이 발생하지 않습니다.

<div style="background-image: url(http://your-image.jpg);background-position:center;background-repeat:no-repeat;background-size: contain;height: auto;">
 <img src="http://your-image.jpg" style="visibility: hidden; width: 100%;" />
</div>

이것은 어떻습니까 :)

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

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

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

다음과 같은 것이 있다고 가정합니다.

<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키에 따라 배치된 아이가 있으면 '자동'이 아닌 숫자를 설정할 수 있습니다.

가장 마음에 드는 답변에 영감을 받아 min-height와 'vw' 단위를 사용한 해결책을 생각해 냈습니다.

저는 매우 특이한 비율의 이미지를 가지고 있었습니다.

실험을 통해 저는 사용하게 되었습니다.

    min-height: 36vw;

그 값은 당신의 이미지 비율에 따라 바뀌어야 합니다.

내 실제 페이지에 사용된 css 코드:

    background:url('your-background-image-adress') center center no-repeat;
    background-size: 100%;
    background-position: top center;
    margin-top: 50px;
    width: 100%;
    min-height: 36vw;

코드 펜 예제 https://codepen.io/viniciusrad/pen/GRNPXoL

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 plugin을 작성하기로 결정했습니다.이 플러그인은 클래스 "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>

이 옵션은 응답성이 높은 레이아웃을 원할 경우 가장 좋은 옵션입니다. 플로트를 사용하지 않는 것이 좋습니다. 특정 경우 플로트를 사용하는 것이 좋습니다. 그러나 대부분의 경우 크로스 브라우저 테스트를 수행할 때 많은 부분에 영향을 미치기 때문에 플로트 사용을 피합니다.

이것이 도움이 되길 바랍니다 :)

이미지 높이가 달라질 수 있거나 이미지 높이를 정확히 모르는 경우 약간의 jquery와 css를 사용하여 이 문제를 해결할 수 있습니다.

HTML

<div class="bg-cover" style="background-image:url(https://i.imgur.com/Ljd0YBi.jpg);"></div>

JQUERY

<script>
var image_url = $('.bg-cover').css('background-image'),
image;

// Remove url() or in case of Chrome url("")
image_url = image_url.match(/^url\("?(.+?)"?\)$/);

if (image_url[1]) {
image_url = image_url[1];
image = new Image();

// just in case it is not already loaded
$(image).load(function() {
//alert(image.width + 'x' + image.height);
$('.bg-cover').css('min-height', image.height);
});

image.src = image_url;
}
</script>

빈 용기 요소의 높이를 배경 이미지 크기에 맞춰 설정하려면 비율을 조금 계산하고 그에 따라 높이를 설정하기만 하면 됩니다.

예:

배경 이미지 크기가 1920x600이라고 가정합니다.

너비와 높이의 비율은 3.2(1920 / 600)입니다.

다음 단계에서는 배경 이미지가 들어 있는 용기 요소의 높이를 현재 보기 너비에 따라 설정합니다.

div.container {
width: 100vw;    
height: calc(100vw / 3.2)
}

따라서 예를 들어 현재 보기 너비가 1600px이면 높이가 500px가 되고 배경 이미지가 딱 들어맞으며 높이가 정확하게 맞습니다.

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

<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("영웅")가 있고 배경 이미지 위에 오버레이할 내부 내용/텍스트("내부")가 있습니다.인라인 스타일을 히어로 클래스로 이동할 수 있습니다.어떤 스타일이 적용되는지 쉽고 빠르게 확인할 수 있도록 남겨두었습니다.

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

페이지 로드에서 작동하는지 확인

페이지가 로드될 때 위의 크기 조정 호출을 수행하여 시작할 때 이미지 크기를 계산해야 합니다.그렇지 않으면 창 크기를 조정할 때까지 영웅 디브가 조정되지 않습니다.저는 크기 조정을 위해 별도의 기능을 설정했습니다.여기 제가 사용하는 전체 코드가 있습니다.

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 정도이고 기본적으로 투명한 이미지를 만들 수 있다면, 그 img를 div에 넣고 실제 사진을 배경 이미지로 만듭니다.그런 다음 img의 불투명도를 1로 설정하고 원하는 크기 치수를 추가합니다.

그 그림은 그런 식으로 그려지고, 눈에 보이지 않는 이미지를 페이지 밖으로 끌어낼 수도 없습니다. 멋진 일이죠.

에 추가할 뿐인div

style="overflow:hidden;"

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