jquery와 CSS를 사용하여 html로 정사각형 컨테이너

Question

특정 컨테이너에 지정된 경우 정사각형이라는 클래스를 만들고 싶습니다. 폭이 높이와 같아야합니다. 레이아웃이 응답해야합니다.

내 현재의 구현 :

$('.square').height($('.square').width()); 
$(window).on("resize",function() { 
    $('.square').height($('.square').width()); 
}); 

이 버그 코드 걸릴 첫 번째 요소의 폭과 모든 사각 클래스 같은 높이를 지정합니다.

jquery와 CSS를 사용하여 올바르게 구현할 수 있습니까?

Answer 1

당신은 this은 세트의 현재의 요소를 참조 함수 내에서 .height(function)

를 사용할 수 있습니다.

코드

$(window).on("resize",function() { 
    $('.square').height(function() { 
     return $(this).width(); 
    }); 
}); 

Answer 2

당신이 자바 스크립트 솔루션을 구현하기 전에 순수한 CSS와 함께이 작업을 수행 할 수 있습니다.

요소의 패딩 - 가기 속성에 백분율 값을 지정하면 해당 값은 부모의 너비와 관련이 있습니다. 의사 요소를 사용하면 부모가 넓을 때 항상 키가 큰 여분의 컨테이너를 만들 수 있으므로 사각형이됩니다. 여기

.square { 
    width: 200px; 
    position: relative 
} 
.square:after { 
    content: ""; 
    display: block; 
    width: 100%; 
    padding-top: 100%; 
} 

예 : 컨테이너에서 텍스트를 필요로하지 않는 경우 http://jsfiddle.net/kexxv1jh/

, 당신은 모두

을 전체 내부 DIV를 드롭 할 수 있습니다