이미지의 크기를 높이로 정의 IE9

필자는 높이로 이미지를 정의해야하는 웹 페이지를 만들고 있습니다. 부모의 높이가 부모와 같기 때문에 height:100%;이거나 부모가 5vh이므로 height:5vh 일 수 있습니다. 너비를 기본값으로 내 보냅니다. width:auto;이미지의 크기를 높이로 정의 IE9

이 코드는 모두 잘 작동하지만 IE9와의 호환성이 필요합니다.이 브라우저의 이미지는 높이를 정의 할 때 크기가 조정되지 않습니다.

HTML 코드 :

<div class="container"> 
    <div class="red"></div> 
    <img id="logo" src="img/myPic.png" alt="myPic"> 
</div>

CSS 코드 :

.container{ 
height:5vh; 
} 

.red { 
width:10px; 
height:5vh; 
background-color: #E92426; 
position:relative; 
float:left; 
} 

#logo { 
margin-left:3%; 
height:100%; 
// OR height:5vh; (I tried both) 
}

당신은 내가 IE9와 호환되도록 조정해야하는지 알고 계십니까?

편집 : 나는 반복해서 여러 가지를 시도하고 결국 나는 서로에 대해 요소를 배치 항복JSFiddle

출처

2016-08-02 Relisora

그것은 좋은 것입니다 나는 그것을 받아 들일 수 있습니다. 때로는 코드와 함께 문제를 더 쉽게 볼 수 있습니다. IE는 일반적으로 IE11이 그것의 모든 측면을 완벽하게 지원하지는 않지만'vh '를 처리하는 방식에서 다소 개략적입니다. – Andrew

나는 [jsfiddle] (https://jsfiddle.net/6Lser421/)과 같은 것을 얻었지만 IE9를 제외한 모든 것에 잘 작동합니다. – Relisora

. (부모 높이 이미지 높이를 기준으로)

나는 내 HTML을 변경 :

<div class="container"></div> 
<div class="red"></div> 
<img id="logo" src="img/myPic.png" alt="myPic">

그리고 내 CSS로 : 그러니까 기본적으로 내가 모든 것을 position:absolute을 넣어

.container { 
    background-color : #323A41; 
    height:5%; 
    width:100%; 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:0; 
} 

.red { 
    width:10px; 
    height:5%; 
    background-color: #E92426; 
    position:absolute; 
    left:0; 
    top:0; 
    z-index:10; 
} 

#logo { 
    height:5%; 
    width:auto; 
    position:absolute; 
    top:0; 
    left:5%; 
    z-index:10; 
}

나는 이것이 내 질문에 대한 최선의 해결책이 아니라는 것을 알고 있지만, 시간이 지나면 작동한다.

추신 : 더 나은 대답을 추가 부담하고 작동하는 경우 : 당신이 문제를 설명하는 jsfiddle이 있다면

출처

2016-08-02 13:45:28 Relisora

이미지의 크기를 높이로 정의 IE9

답변

관련 문제