div 높이를 배경 크기에 맞게 자동 조정하는 방법은 무엇입니까?
-
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>
단일 미리 정해진 배경 이미지이고 배경 이미지의 종횡비를 왜곡하지 않고 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로 표시하세요.
즐기다!
내가 생각할 수있는 가장 좋은 솔루션은 너비와 높이를 퍼센트로 지정하는 것입니다. 이를 통해 모니터 크기에 따라 화면을 다시 조정할 수 있습니다. 반응 형 레이아웃이 더 많습니다 ..
예를 들어. 당신은 가지고 있습니다
<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;"