Img 너비 100 % : 높이 110 %

-2

이 문제가 발생했습니다. html 이미지의 너비가 100 %이고 높이가 110 % 인 이미지가 필요합니다. 그것은 작동하지 않습니다. 어떤 아이디어?Img 너비 100 % : 높이 110 %

2014-10-15 Кристиян Кацаров

이 문제를 재현 할 수 없습니다. http://jsfiddle.net/548a0kjf/1 –

몇 가지 코드를 알려주십시오. 또는 –

http://jsfiddle.net/1Lrzc9L1/ sry guys. –

당신이 보여주지 않았기 때문에 당신의 코드에 어떤 문제가 있는지 모르겠지만, 여기에는 상위 div의 100 % 너비이지만 110 % 높이의 이미지 코드가 도움이 될 것입니다 당신은 : 이미지가 내부의 모든 요소의 부모를 점유되지

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <meta charset="UTF-8"> 
     <style> 
      html, body { height: 100%; margin: 0; padding: 0; } 
      #img-wrapper { border: 5px solid #000; width: 50%; height: 50%; } 
      #img { display: block; width: 100%; height: 110%; } 
     </style> 
    </head> 
    <body> 
     <div id="img-wrapper"> 
      <img id="img" src="https://www.helpkidscode.com/pub/wp-content/uploads/2013/08/oskay-hello-world-toast.jpg" /> 
     </div> 
    </body> 
</html>

경우, 이미지와 요소에 display: block를 추가합니다.
이미지의 상위 요소가 올바른 높이를 가지지 않고 높이 값이 백분율 인 경우 해당 요소의 상위 높이를 확인하십시오 (예를 들어, 화면을 느낄 수 있도록 html 및 본문 높이 값을 설정 함).

출처

2014-10-15 10:28:15

내가 위의 의견에서 준 URL pls를 볼 수 있습니다. –

나는 그것을 해결했다고 생각한다 : [http://jsfiddle.net/s8rtrfjx/](http://jsfiddle.net/s8rtrfjx/) –

이미지 부모 요소에 명시적인 높이 값을 추가해야했습니다 (height: 100%;을 추가했습니다).) 그렇지 않으면 브라우저는 백분율이 관련된 높이를 "알지 못하고"이미지 높이와 부모 요소 내부 높이를 동일하게 만듭니다. –

Img 너비 100 % : 높이 110 %

답변

관련 문제