Чистое решение для CSS - Квадратные элементы?

Ответ 1

На самом деле можно добиться этого с помощью этого опрятного трюка, который я нашел в этот блог

#square {
   width: 100%;
   height: 0;
   padding-bottom: 100%;
}

Надеюсь, что поможет

Ответ 2

Нет и Да (Kinda)

Хорошо, так что короткий ответ "нет" невозможен. Длинный ответ: "да", учитывая определенные ограничения и уступки (т.е. Дополнительная html-разметка и ограничения на то, что можно сделать).

Учитывая этот CSS:

.square {
    position: relative;
    margin: 20px;
    display: inline-block; /* could be float */
    overflow: auto; /* UPDATE: if content may overflow square */
}
.sq-setter-w {
    width: 100%;
    height: auto;
    visibility: hidden;
}
.sq-setter-h {
    width: auto;
    height: 100%;
    visibility: hidden;
}
.sq-content {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

С помощью этого HTML:

<div class="square" style="width: 200px">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-w"/>
    <div class="sq-content">Here is content</div>
</div>
<div class="square" style="height: 100px">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-h"/>
    <div class="sq-content">Here is content</div>
</div>
<div class="extrawrapper">
<div class="square" style="width: 200px">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-w"/>
    <div class="sq-content">Here is content</div>
</div>
</div>
<div class="extrawrapper">
<div class="square" style="height: 100px">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-h"/>
    <div class="sq-content">Here is content</div>
</div>
</div>

Вы можете заставить его сделать что показывает эта скрипта.

Ключами являются:

• Используемое изображение должно быть квадратным изображением, поскольку оно управляет пропорциональным размером (элемент img является единственным элементом, который может выполнять такую ​​пропорциональную работу, поскольку он может основывать свой размер на пропорции самого изображения).
• Вы должны знать, собираетесь ли вы установить width или height, чтобы вы могли правильно установить класс изображения для его размера. При желании, установите width или height в самой img, тогда вам не нужно беспокоиться о том, чтобы установить класс в значение 100%. Моя демонстрация предполагала, что вы задаете размер в div-оболочке (мой .square класс).
• Чтобы свернуть div вокруг img, который управляет пропорциональным размером, вам нужно установить display: inline-block или float на div (как отмечено в css выше).
• Из-за # 3, если вы хотите, чтобы div выполнял больше "блочных", вам нужно предоставить им дополнительную обертку div, как показано на третьем и четвертом.

Очевидно, что в этом решении есть много дополнительной надбавки. Поэтому во многих отношениях лучше сказать "просто использовать javascript", но я действительно хотел доказать, что это может быть сделано (по крайней мере в некоторых случаях) чисто с HTML и CSS.

Обновление: для показа гибкой возможности выбора размера

Посмотрите эту скрипту для процентов, приводящих размер, с этим примером html (width установлено значение 30%):

<div class="square" style="width: 30%">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-w"/>
    <div class="sq-content">Here is content</div>
</div>

Ответ 3

Мне нужно было добиться чего-то подобного сегодня и иметь ту же идею с изображением. Я хотел проверить другие возможности, и Google привел меня сюда.

... вам не нужен образ src. вы можете просто использовать hash, если хотите квадрат. Он сохраняет запрос http.

Если вы хотите получить разные пропорции, вы должны использовать src. Если вы хотите иметь соотношение 16: 9, изображение должно быть 16px wide и 9px high (как можно меньше)

Сравнение обоих методов (см. другие ответы в этом потоке)

img vs. padding-bottom

Здесь сценарий, чтобы показать, насколько более совместима версия img (может легко обрабатывать значение px) (интервал будет изменяйте размер квадрата каждую секунду)

Если вы используете процентные значения, оба метода могут достичь того же результата, но для версии дополнений не требуется дополнительная разметка (<img src="#"/>)

Вывод:

В зависимости от реализации у каждой техники есть плюсы и контрасты.

HTML

<div class="floater">
    <div class="square square_noImg">
        <div class="inner">Hey blue you look totally squared</div>
    </div>
    <div class="square square_img">
        <img src="#"/>
        <div class="inner">Hey red you seem off</div>
    </div>
</div>

CSS

.floater {
    font-size: 0;
}
.square {
    position: relative;
    display: inline-block;
    width: 100px;
    margin: 0 5px; 
}
.square_noImg {
    padding-bottom: 100px;
    background: red;
}
.square_img {    
    background: blue;
}
img{
    width: 100%;
    height: auto;
    border: 0;
    visibility: hidden;
}
.inner {
    position: absolute;
    top: 10%;
    right: 10%;
    bottom: 10%;
    left: 10%;
    background: white;
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    padding: 10px 5px;
}

Ответ 4

Это невозможно сделать только с помощью CSS. Используя jQuery, вы можете добиться этого, выполнив

var chld = $('.child').width();
$('.child').css({'height':chld+'px'});

Проверьте рабочий пример http://jsfiddle.net/4Jnfq/

Решение только для CSS можно найти здесь в последнем обновлении "Изменение размера с содержимым".
Хотя это применимо и для кругов, вы можете удалить border-radius: 50%, чтобы он работал для квадратов.

Ответ 5

Не с относительными единицами типа %, потому что они будут вычисляться относительно элемента контейнера. Но можно сделать квадрат элемента, если вы используете единицы, такие как px или em, чтобы установить оба измерения.

Ответ 6

Собственный подход JS в ответ на комментарий @Dave относительно ответа @praveen-kumar:

var squareElement = function(el) {
    el.style.height = el.offsetWidth + 'px';
}

и использовать его в любом месте

squareElement(document.querySelector('your-selector'));