CSS와 이미지를 사용하는 종횡비가 올바르게 렌더링되지 않습니까?

Im 브라우저의 렌더링 문제인지 또는 CSS의 오류인지 궁금합니다. 정의 된 종횡비에서 div를 축척하는 좋은 방법은 투명한 이미지를 자식 요소로 사용하는 것입니다. 여기에 작은 데모가 있습니다. 이 질문이 필요합니다.CSS와 이미지를 사용하는 종횡비가 올바르게 렌더링되지 않습니까?

하지만 100 % 높이를 원한다면 왜 제대로 작동하지 않습니까?

필자는 FF10, Safari 5.1.2, IE8 및 IE9에서이를 테스트했습니다. (ie8 만 올바르게 렌더링되는 것 같습니다 ...)

누군가가 문제를 설명하고 해결책을 생각해 낼 수 있기를 바랍니다. 당신은, 당신이 폭에 대한 자동 설정시 width:auto와 width:100% 사이

1.Different : 질문을 본 후

감사합니다, 릭

<!DOCTYPE html> 
<html lang="uk"> 
<head> 
    <title>test</title> 
    <style> 
     html 
    , body { 
     margin: 0; 
     padding: 0; 
     width: 100%; 
     height: 100%; 
     background: green; 
    } 

/* AUTO WIDTH - doesnt render correct when scaling the browser window to a smaller size */ 
    .holder1 { 
     position: relative; 
     display: inline-block; 
     height: 100%; 
     width: auto; 
     background: yellow; 
     border-right: 1px solid red; 
    } 

    .holder1 .ratio { 
     display: block; 
     height: 100%; 
     width: auto; 
    } 

/* AUTO HEIGHT - works fine */ 
    .holder2 { 
     position: relative; 
     display: inline-block; 
     height: auto; 
     width: 100%; 
     background: yellow; 
     border-right: 1px solid red; 
    } 

    .holder2 .ratio { 
     display: block; 
     height: auto; 
     width: 100%; 
    } 


    </style> 
</head> 
<body> 
    <span class="holder1"> 
     <img src="/images/empty_image.png" class="ratio" alt="Ratio image"> 
    </span> 
</body> 
</html>

출처

2012-02-21 Rik

'width' 속성은''(왜냐하면'display : inline'을가집니다)에 적합하지 않으므로 .holder2에 대해서는 아무 일도하지 않습니다. –

@Alexander .hoder2는 데모에서 실제로 사용되지 않습니다 (마크 업에는 표시되지 않습니다). –

, 나는 몇 가지 아이디어를 가지고 코드에 대한 제안 브라우저가이 너비를 처리하도록두고 다른 브라우저마다 width:auto을 처리합니다. width:100%을 사용하면 브라우저가 전체 너비를 갖도록 확장해야합니다. 이것이 내가 생각하는 것입니다. 하지만 div가 모든 교차 브라우저에서 100 % 확장 될 수 있으려면 CSS min-width:100%을 추가하십시오. 올바르게 작성하면됩니다. 상대, 당신이 설명해야합니다

position:relative = position:static

당신이 위치를 사용,이 상황에서,이 코드 줄은 아무 의미가없는 상대 : 당신의 CSS 2.About

, 나는 당신이 위치를 살펴 필요 요소의 상대적 위치를 원하는 위치는 어디에 있고, 위쪽 또는 왼쪽을 추가하십시오.

희망이 당신을 도울 수있다!

출처

2012-02-22 08:55:07

사실 'position : relative'에 대한 주석은 완전히 사실이 아닙니다. 'position'을 지정하지 않은 경우와 같은 위치에 표시되지만, float, z-index 등의 요소는 다르게 동작합니다. (나는 OP의 예에서 중요하다고 생각하지 않지만 그의 실제 웹 사이트에는 차이가있을 수 있습니다.) –

그래,이 코드 라인은 그의 예에서 의미가 없다고 언급했지만, 네가 말했듯이'position : relative'와 같은 스타일을 가진 다른 자식 요소가있다. –

@ Mr Resister, z-index가 어떻게 위치를 변경할 수 있는지 알려주시겠습니까? 아마도 CSS에 대해 더 많이 알게 될 것입니다, 감사합니다! –

CSS와 이미지를 사용하는 종횡비가 올바르게 렌더링되지 않습니까?

답변

관련 문제