Укажите натуральный размер элемента HTML

Расскажите о изображениях в HTML. Если я отброшу изображение на страницу без каких-либо ограничений, он примет свой "естественный размер" --- то есть буквальный размер изображения в пикселях. Если я укажу CSS max-width и max-height, то он будет сохранять естественное соотношение сторон, но масштабируется, чтобы соответствовать ограничению размера. Отлично!

Я хочу, чтобы это точное поведение на произвольном элементе. То есть, я хочу создать <div> или что-то еще, что имеет естественный размер (который я бы указал в пикселях) и поддерживал его соотношение сторон при воздействии max-width и max-height. (Бонусные очки: было бы здорово, если бы технология поддерживала также min-width и min-height.)

Вот еще информация, которую я собрал:

  • Для изображения HTML5 вы можете прочитать естественный размер изображения с атрибутами naturalWidth и naturalHeight, если атрибут complete равен true. К сожалению, поскольку MDN указывает, эти свойства доступны только для чтения и специфичны для элементов изображения.

  • Этот подход является блестящим, но (хотя высота отвечает на max-width), ширина не отвечает на max-height.

  • Немного поиска не удалось найти решение только для CSS, что заставляет меня думать, что его может не существовать. Я также соглашусь с решениями JavaScript, но они должны быть надежными для изменения размера окна и размера родительского элемента.

Ответы

Ответ 1

Здесь мое решение для супер-пуфера:

HTML

<div class="ratioBox">
    <div class="dummy"></div>

     <div class="el">This is the super duper ratio element </div>

</div>

CSS

.ratioBox{
    position: relative;
    overflow: hidden;      /* to hide any content on the .el that might not fit in it */
    width: 75%;            /* percentage width */
    max-width: 225px;
    min-width: 100px;
    max-height: 112.5px;
    min-height: 50px;  
}

.dummy {
    padding-top: 50%;      /* percentage height */
}

.el {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver;
}

​

Посмотрите, как это работает: http://jsfiddle.net/joplomacedo/7rAcH/

Объяснение, если вы не можете понять, что происходит, придет в конце дня, поскольку я, к сожалению, устарел. [it 28 июля, 14:54 (GMT GMT), когда я пишу это]

Ответ 2

Изменить размер div как изображение с помощью CSS

DEMO: измените размер окна результатов (ширина и высота), чтобы увидеть размер div как изображение.

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

В этом методе используются элементы vh/vw. Они позволяют вам установить ширину в соответствии с высотой области просмотра и высотой в соответствии с шириной окна просмотра.
При комбинированном использовании max-width и max-height вы можете заставить его вести себя и изменять размер, как изображение при изменении размера браузера.
Поддержка браузера для этих устройств: IE9+. Для получения дополнительной информации см. canIuse.
В приведенном выше примере используется соотношение сторон 1:1, но вы можете с небольшим количеством вычислений использовать любое другое соотношение сторон, примеры:

CSS (для соотношения сторон 1:1)

div{    
    width: 80vw; 
    height: 80vh;

    max-width: 80vh;
    max-height: 80vw;
}

Еще один шаг: vmin и vmax

Вы также можете использовать vmin/vmax. Эти единицы измерения выбирают минимальное или максимальное значение между шириной и высотой области просмотра, поэтому вы можете иметь желаемое поведение max/min-height и max/min-width. Но поддержка браузером этих устройств не так хороша, как vh/vw (canIuse).

Демо

CSS (для соотношения сторон 1:1):

div{    
    min-width:200px;
    min-height:200px;

    width: 80vmin; 
    height: 80vmin;

    max-width: 800px;
    max-height: 800px;
}

Ответ 3

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