Используйте CSS (и, возможно, JavaScript), чтобы сделать элемент квадратным (или поддерживать определенное соотношение сторон) - PullRequest
Новая
       6

Используйте CSS (и, возможно, JavaScript), чтобы сделать элемент квадратным (или поддерживать определенное соотношение сторон)

5 голосов
/ 14 января 2010

У меня есть div, который я хочу иметь следующие характеристики:

  • Ширина = 50% его родительского элемента
  • Высота, равная той, которая должна быть для поддержания определенного соотношения сторон.

Мне нужно использовать проценты, потому что размер объекта будет изменяться влево-вправо при изменении размера браузера. Я хочу, чтобы размер объекта был изменен сверху вниз, чтобы объект сохранял такое же соотношение сторон.

Я не думаю, что есть какой-либо способ использовать чистый CSS для этого, но кто-нибудь знает способ? В качестве альтернативы, есть ли простой способ JavaScript сделать это? (JQuery в порядке.)

Ответы [ 4 ]

15 голосов
/ 22 апреля 2010

Я понял, как это сделать без js, хотя вам нужно использовать прозрачное изображение.

Настроить HTML-структуру, например: 

<div class="rect_container"><img class="rect_image" src="rect_image.png"/>
 <div class="rect">Your favorite content here</div>
</div>

Используйте прозрачный png AxB для rect_image, где AxB - соотношение сторон.

Тем временем настройте таблицу стилей, например: 

.rect_container {width: 50%; position: relative;}
.rect_image {width: 100%; display: block;}
.rect {width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;}

Здесь важно использовать тот факт, что изображения сохраняют свои пропорции при изменении размера в одном направлении. Между тем нам нужен полезный элемент div, поэтому мы делаем изображение отображаемым как блок, оборачиваем его в элемент div и помещаем в него абсолютно позиционированный элемент div. Я извлек этот код из чего-то более сложного, которое я на самом деле тестировал. Работает как шарм.

4 голосов
/ 13 сентября 2012

Вот чистая версия CSS без тега img: 

<div class="apple_container"><div class="apple_icon"></div></div>

SCSS (включая компас для отображения размера фона): 

.apple_container {
  width: 50%;
}
.apple_icon {
  padding-bottom: 100%;
  background-image: url(/images/apple.png);
  background-repeat: no-repeat;
  @include background-size(contain);
  background-position: center center;
}

CSS, сгенерированный из вышеперечисленного: 

.apple_container {
  width: 50%;
}
.apple_icon {
  padding-bottom: 100%;
  background-image: url(/images/apple.png);
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  background-position: center center;
}

В результате получается квадратный элемент с фоновым изображением, центрированным и помещенным в него Это хорошо для адаптивных элементов, размер которых вы хотите изменить в зависимости от устройства пользователя.

3 голосов
/ 14 января 2010

JQuery звучит довольно просто. Установите ширину 50% в CSS, а затем следующее: 

function onResize() {
    var el = $('#element');
    el.height(el.width());
}
$(window).resize(onResize);
$(document).ready(onResize);
0 голосов
/ 14 января 2010
...