[html] 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;
}