Держите ширину изображения такой же, как высота, если высота установлена ​​в процентах

Question

Я не слишком уверен, что это может быть достигнуто в чистом CSS, хотя было бы предпочтительнее. У меня есть изображение:

<img src="#" class="article-thumb"> 

CSS:

.article-thumb { 
    height: 55%; 
} 

Итак, как я могу сделать width равным независимо от height есть? Я пытаюсь достичь изображения, который является идеальным кругом (так что я, очевидно, применяю border-radius), и он также может масштабироваться, чтобы заполнить столько же, сколько и его контейнер (на самом деле для заполнения 55% его контейнера в height).

Answer 1

Вот один из способов сделать это, который включает в себя дополнительную надбавку, чтобы она не понравилась всем.

Пусть .wrap - некоторый родительский элемент, содержащий блок с некоторой шириной и высотой (может быть в значениях%).

Определите дочерний контейнер inline-block, .framer, ширина которого равна% от родителя, например, 23%.

В пределах .framer разместите квадратное изображение .aspect-setter (размеры не являются критичными, просто держите его маленьким) и установите ширину на 100%. Затем изображение будет масштабироваться до ширины .framer, а .framer будет сжиматься до изображения (потому что это встроенный блок) и сохранить свою внутреннюю форму (потому что высота автоматически). Используйте visibility: hidden, чтобы скрыть изображение, сохраняя его в потоке содержимого.

Определите .avatar-container как абсолютно позиционированный элемент и используйте смещения, чтобы масштабировать его до .framer. Поскольку .framer является квадратным, .avatar-container также будет квадратным.

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

.wrap { 
 
    width: 400px; 
 
    height: 250px; 
 
    border: 1px dotted gray; 
 
} 
 
.framer { 
 
    display: inline-block; 
 
    position: relative; 
 
    border: 1px dashed blue; 
 
    width: 23%; 
 
} 
 
.aspect-setter { 
 
    vertical-align: top; 
 
    visibility: hidden; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.avatar-container { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    border-radius: 50%; 
 
    background-image: url('http://www.wisportsfan.com/siteresources/images/defaultavatar.jpg'); 
 
    background-size: cover; 
 
}

<div class="wrap"> 
 
    <div class="framer"> 
 
     <img class="aspect-setter" src="http://placehold.it/100x100"> 
 
     <div class="avatar-container"></div> 
 
    </div> 
 
</div>