Изменить размер 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. При необходимости я могу написать свой собственный.