응답 높이가

내가응답 높이가

.mybanner { 
    height:320px; 
    background:url(../img/banner.png) no-repeat; 
    background-size:100%; 
}

반응 이미지 배경이 잘 작동하는 반응 배너이 코드를 가지고있는 유일한 문제는 내가 큰 함께 테스트 할 때 .mybanner 컨테이너의 높이가 예를 들어

을 변경하지 않는 것입니다 화면

mybanner div element width = 980px 
mybanner div element height = 320px 
bakcground_image width = 980px 
background_image height = 320px

하지만 난 화면 크기를 조정할 때, 폭 mybanner의 div 요소가 될 가정 해 봅시다 680 픽셀

이 예에서

mybanner div element width = 680px 
mybanner div element height = 320px 
bakcground_image width = 680px 
background_image height = 220px

가 background_image 높이가 서로 다른 값 mybannder 높이, 그래서 내가 이미 .mybanner 높이를 만들기 위해, 다음과 같이 수정하려고

.mybanner { 
    min-height:170px; 
    max-height:320px; 
    background:url(../img/banner.png) no-repeat; 
    background-size:100%; 
}

을 자동

되었다

추한 공백을 될 것

나이 :

.mybanner { 
    height:100%; 
    //height:auto; 
    background:url(../img/banner.png) no-repeat; 
    background-size:100%; 
}

하지만 작동하지 ....
하나를 어떻게 div의 높이를 만드는 방법 아이디어. 그의 배경에 이미지 크기에 따라 너무 변화 .mybanner

출처

2014-10-02 Neversaysblack

영어가 귀하의 언어가 아닌 것으로 알고 있지만, 무슨 뜻인지 이해하기 어렵습니다. 우리는 .mybanner 클래스가 무엇인지 모르기 때문일 것입니다. 그게 이미지인가요? 사업부? a? 다른 것? 높이가 변하기 때문에 항상 마크 업을 추가해야합니다. 당신이 보는 (또는 보이지 않는) 것은 완전히 다른 이야기이며 마크 업을 기반으로합니다. 그런데 베팅을해야한다면'background-size'를'100 %'에서'cover'로 바꿀 것을 제안합니다 – Devin

@ fabio sory 만약 내가 분명하지 않다면 ..... mybanner는 div 요소입니다. 바탕 화면에 따라 내 배경 이미지 크기를 조정하고 싶기 때문에 'background-size = 100 %'를 사용합니다. 'background-size : cover'를 사용하면 전체 이미지가 표시되지 않습니다. 작은 ... 내 경우에는 전체 이미지가 필요하므로 표지 대신 100 % 선택) – Neversaysblack

자바 스크립트를 사용하여 높이를 변경할 수 있습니다.

http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

을 또는 간단하게는, 배경을 사용하여 객체로 사업부에 IMG를 넣어 설정하지 :

<body onresize="resizediv()"> 
<div class="mybanner" id="mybanner"> 
... 

<script> 
function resizediv() { 
div = document.getElementById('mybanner'); 
    var imageSrc = div.style.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2').split(',')[0]; 

    var image = new Image(); 
    image.src = imageSrc; 

    var width = image.width, 
     height = image.height; 

    div.style.height = image.height; 

} 
</script>

또는 모든 배경의 크기 유효한 속성이있다, 당신은 하나를 최고의 선택할 수 있습니다 이미지 너비 100 % div 및 이미지 높이를 편집하지 않으면 자동으로 계산됩니다.

출처

2014-10-02 06:32:31 Martin

흠 ... 백그라운드 크기 속성에 문제가 없다고 생각합니다 .... 배경 크기를 사용할 수 있습니다 :뿐만 아니라 포함하지만 mybanner div 클래스의 높이가 320px이기 때문에 배경 크기와 동일한 결과를 얻으십시오 : 100 %, mybanner 클래스의 높이를 사용하면 'auto'또는 '100 %'배너가 사라집니다 (물론 mybanner don ' t 높이가 있고 그냥 배경을 가지고 있지 않다.) – Neversaysblack

나는 그의 배경에 이미지 크기에 따라 div .mybanner의 높이가 필요하다는 것을 이해하지 못하고 편집했다. 대답 – Martin

당신은 내가 해결할 배경 대신 객체로 div로 IMG를 만들면 맞습니다 ...하지만 그 이미지 위에는 제가 생각하기에 똑같은 입력 텍스트를 넣을 것입니다. 제 경우에 맞지 않습니다 ... 어쨌든 제가 시도 할 때 해당 js 코드를 사용하려면 ... 아래로 크기를 조정하고 mybanner는 마치 mybanner.div.style처럼 보입니다. – Neversaysblack

응답 높이가

답변

관련 문제