Сохраняйте соотношение сторон при масштабировании с внутренними изображениями

Question

Сохраняйте соотношение сторон при масштабировании с внутренними изображениями

0

Я пытался создать меню с фиксированным соотношением сторон, которое масштабируется в соответствии с размером окна браузера. Для этого я использую div с фоновым изображением: http://jsfiddle.net/keroben/9seaM/

Я использую следующий трюк с padding-bottom, чтобы сохранить соотношение сторон:

padding-bottom:10%;

от хранения/масштабирования коэффициента DIV с процентами.

Это работает при изменении размера и сохранении пропорций. Теперь, когда я добавляю элементы меню в качестве изображений, я не могу понять, что высота div остается одинаковой (http://jsfiddle.net/keroben/aT3Vz/):

<div id="cool" >
    <img src="https://dl.dropboxusercontent.com/u/18518333/clear.png"/>
    <img src="https://dl.dropboxusercontent.com/u/18518333/clear.png"/>
    <img src="https://dl.dropboxusercontent.com/u/18518333/clear.png"/>
    <img src="https://dl.dropboxusercontent.com/u/18518333/clear.png"/>    
</div>

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

kossmoboleat 17 дек. 2013, в 00:49

Источник

0

Элементы <img /> хорошо поддерживают свои собственные пропорции. Можете ли вы положиться на элементы изображения, чтобы задать высоту содержащемуся <div /> ?
Jasper 16 дек. 2013, в 23:43
0

@Jasper, да, я тоже так думал, но с несколькими изображениями по умолчанию кажется, что они просто выравнивают их по вертикали, когда горизонтального пространства уже недостаточно, независимо от установленной высоты, которую я мог бы установить. Я долго зависал с max-width:100% плавных изображений max-width:100% пока не понял, что несколько изображений разные. Я думаю, что ответы Горацио и Мачей работают, и я приму один из них после того, как у меня будет время проверить позже ...
kossmoboleat 17 дек. 2013, в 09:51

Теги:

javascript

html

css

image

image-scaling

2 ответа

1

Вы должны добавить это

#cool img{display:block;float:left;width:25%;height:auto;}

здесь у вас есть пример:

играть на скрипке

Maciej Paprocki 16 дек. 2013, в 21:41

Ещё вопросы

Элементы <img /> хорошо поддерживают свои собственные пропорции. Можете ли вы положиться на элементы изображения, чтобы задать высоту содержащемуся <div /> ?
@Jasper, да, я тоже так думал, но с несколькими изображениями по умолчанию кажется, что они просто выравнивают их по вертикали, когда горизонтального пространства уже недостаточно, независимо от установленной высоты, которую я мог бы установить. Я долго зависал с max-width:100% плавных изображений max-width:100% пока не понял, что несколько изображений разные. Я думаю, что ответы Горацио и Мачей работают, и я приму один из них после того, как у меня будет время проверить позже ...

Horatio Alderaan · Accepted Answer · 2013-12-16T21-15-00.000Z

Проблема в том, что изображения меняют высоту div. Вы можете удержать их от этого, плавая. Кроме того, если вы хотите, чтобы они всегда находились в контейнере, вам нужно настроить ширину изображений. Итак, что-то вроде этого может работать:

#cool img {
    float:left;
    width:25%;
    height: auto;
}

В интересах создания семантического HTML вы можете изменить свою разметку на нечто вроде следующего:

<nav>
    <ul>
        <li><a href="#"><img src="/my/cool/image.png" alt="Menu item 1"/></a></li>
        <li><a href="#"><img src="/my/cool/image.png" alt="Menu item 2"/></a></li>
        <li><a href="#"><img src="/my/cool/image.png" alt="Menu item 3"/></a></li>
    </ul>
</nav>

также display: block . это то, что вы ищете
Ты прав. Хотя в большинстве браузеров добавление float вызывает неявное display:block .
Я этого не знал. Я должен прочитать об этом, но я думаю, что в Firefox это не работает таким образом.