정사각형 이미지가있는 격자 레이아웃 (오버 플로우 숨김)

그리드의 각 div에 이미지가있는 격자 레이아웃이 사용 중입니다. 그러나 나는 모든 이미지를 사각형으로 만들고 싶기 때문에 모든 오버 플로우를 숨겨야합니다. 내 유일한 문제는 너비가 '20 % '로 설정되어있는 것입니다. 높이를 div의 정확한 너비에 맞추려면 어떻게해야합니까?정사각형 이미지가있는 격자 레이아웃 (오버 플로우 숨김)

출처

2012-10-28 Angelo A

당신은이 기술은 (귀하의 경우 제곱 비율) 화면 개체의 비율을 유지하기 위해 매우 유용 padding-bottom:100%

사용할 수 있습니다. 유일한 단점은 div을 position:relative으로 설정하고 내부에 position:absolute의 요소가 있어야한다는 것입니다.

출처

2012-10-28 22:27:07

나는 화면 비율 아무것도하고 싶지 않아. 부모 div가 사각형이되도록 div의 이미지가 오버플로되어야합니다. 하지만 부모 div의 높이를 설정하는 방법을 모르겠습니다. –

"square"는 종횡비입니다. 종횡비는 1 : 1입니다. 죄송합니다.이 기술이 작동하려면 내용이 절대적이어야합니다. 나는 게시판을 업데이트 중입니다. –

그래, 아직도 알아낼 수 없다. 나는 jsFiddle을 만들었 어. 내가 뭘 잘못하고 있는지 말해 줄 수 있니? http://jsfiddle.net/wSbnj/1/ –

감사 카를로스 마르티네스에, 이것은 내가 필요한 것입니다 : http://jsfiddle.net/wSbnj/2/

div#image { 
    box-sizing: border-box; 
    border:1px solid red; 
    position:relative; 
    width:50%; 
    padding-bottom:50%; 
    overflow:hidden; 
} 
div#image img { 
    position:absolute; 
    width:100%; 
} 
 
<div id="wrapper"> 
    <div id="image"><img src="http://static.zara.net/photos//2012/I/0/2/p/5618/655/802/5618655802_1_1_3.jpg?timestamp=1350490400442"></div> 
</div>

출처

2012-10-28 23:28:16

정사각형 이미지가있는 격자 레이아웃 (오버 플로우 숨김)

답변

관련 문제