적용되는 배경 이미지의 높이 자동 설정

this website에서 Background 규칙의 CSS3 Cover 속성을 사용하여 헤더 뒤에 이미지를 늘립니다.적용되는 배경 이미지의 높이 자동 설정

바로 지금은 header 요소가 이되도록 500px으로 설정해야했습니다. 그러나이 방법은 최적의 솔루션이 아닙니다. 왜냐하면 창 크기를 조정할 때 높이가 작아서 이미지가 비례하여 축소되기 때문입니다. 나는 해결책이 자바 스크립트에있을 거라고 생각하고 있니?

<div style="background: url(http://altushealthsystem.com/dev/wp-content/uploads/home-banner.jpg) no-repeat 0 0 transparent;background-size: cover; min-height: 500px;"></div>

Link to the JS Fiddle

이게 가능 : 여기

코드인가?

출처

2014-04-16 farjam

가능하면'html','css','js'를 게시 할 수 있습니까? 감사합니다 – guest271314

그것은 [여기] (http://altushealthsystem.com/dev/)에 살고, 당신이 아직도 HTML/CSS를 게시 해야하는지 알려주십시오. – farjam

가능하면 원래 게시물에'html','css','js'를 게시 할 수 있습니까? 감사합니다 – guest271314

자바 스크립트가 필요하지 않습니다. 백분율을 사용하여 머리말 높이를 지정할 수 있습니다. 그러나 부모가 높이를 지정한 경우에만 작동합니다. 당신의 예에서

당신은, 예를 들면 html 및 body 요소 (헤더의 모든 조상)에 대한

height: 100%;

을 추가해야합니다 :

height: 40%;

당신이 요소를 헤더.

출처

2014-04-16 22:26:52 damgad

감사합니다. 작동합니다. – farjam

대신 헤더의 배경을 선언, 당신은 다음과 같은 스타일로 이미지 요소를 추가 할 수 있습니다 : 당신은 또한 특정 폭과 높이를 선언 할 @media 태그를 이용해야한다

<header....> 
<img src="http://altushealthsystem.com/dev/wp-content/uploads/home-banner.jpg" style="max-width:100%; height:auto;position: absolute;z-index: -999;"> 

    <div class="container"> 
    <div class="row top-row"> 
...

화면 크기가 일정합니다.

출처

2014-04-16 22:31:18 chavakane

내 배경 솔루션보다 나은 솔루션이라고 생각합니다. 고마워요 – farjam

그러나 내 콘텐츠가 이제 그 이미지 아래에 숨겨져있는 문제가 여전히 나타납니다. – farjam

z-index를 사용하여 문제를 해결해야합니다. [링크] (https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) – chavakane

적용되는 배경 이미지의 높이 자동 설정

답변

관련 문제