Изменить размер div, чтобы соответствовать содержимому (изображению) после изменения размера содержимого

Это кажется хитрым:).

Вот скрипка http://jsfiddle.net/xhrkLwwL/2/ и там описание с некоторым псевдокодом (точный код в скрипте):

<div id="gridSettings" style="height:100%">
    <div id="gridSmaller" style="height:100%">
        <img id="gridSmallerImg" style="height:200%"/>
    </div>
</div>

Я пытаюсь сделать отзывчивые квадратные иконки, основанные только на высоте и CSS.

Теория следующая:

У меня есть квадратное изображение значка (200x400px - два в одном для наведения). Изображение вводится в HTML как <IMG> (НЕ как свойство фона css). <IMG> имеет обертку DIV а также <IMG> Подходит к высоте:200%. Я ожидаю IMG масштабировать так, чтобы я мог видеть только верхние 50% и ширину DIV определяется по ширине IMG, что совпадает с видимой высотой (50% от общей высоты) -> так как изображение имеет размер 200x400px... вот и все... КВАДРАТ:).

Практика:

Это работает, пока я не изменю размеры окна. Высота иконки DIV составляет 10% от высоты окна, поэтому, если я изменю размер окна, DIV высота идет, как и IMG внутри. Но DIV's Ширина остается такой же, как и до изменения размера, поэтому мои значки обрезаются:(. Если я затем изменю любую CSS-опору (через FF DOM Inspector, событие hover...), DIV обновления для правильной ширины.

У кого-нибудь есть идеи, что может быть причиной?

Огромное спасибо:)

PS: Вам не нужно присылать мне решение JS. При необходимости я могу написать свой собственный.

0 ответов

Другие вопросы по тегам