Эластичные квадраты (CSS HTML)

Question

Я пытаюсь создать «эластичный» сайт в CSS и HTML; Я хочу, чтобы на ширине экрана было 6 квадратов; Я имею ширину квадратов масштабирования до размера экрана, но я хочу сохранить квадрат квадратов. Есть ли способ установить высоту моего div на тот же размер, что и ширина div (которая задается значением%).

Answer 1

См. DEMO.

В принципе, дайте элементу одинаковое значение для width и padding-bottom, чтобы оно оставалось как квадрат при масштабировании страницы.

.square { 
    background-color: red; 
    width:15%; 
    height:0px; 
    padding-bottom:15%; 
    display: inline-block; 
} 

Подробнее о жидкости квадратов here.

Answer 2

Да, наиболее распространенным решением является использование 1px на 1px изображения и сделать его полную ширину с переменной высотой:

Демо: http://jsfiddle.net/57xhg/1/

CSS:

.wrap { 
    background: red; 
    margin: 0 auto; 
    width: 100px; 
} 

.wrap img { 
    width: 100%; 
    height: auto; 
} 

Answer 3

Вы можете сделайте это, используя свойство background-repeat-x и background-repeat-y, предоставив эластичную линию, которую вы хотите нарисовать