Как масштабировать и выравнивать по центру встроенное изображение в гибком DIV?

У меня гибкий макет, и у меня есть div, который всегда соответствует высоте и ширине окна браузера, даже при изменении размера браузера. Итак, div, который составляет 100% высоты и 100% ширины окна браузера.

В этом div у меня есть изображение, которое соответствует 100% ширины и высоты его родителей. Так что теоретически это изображение будет полноэкранным. В тот момент, когда вы увеличиваете окно браузера, размер изображения превышает размер его родителя и правой стороны, а нижняя часть изображения обрезается.

Как я могу обрезать все края изображения при увеличении окна браузера? Итак, я думаю, я хочу вертикально центрировать изображение внутри его родителя.

Ширина всех изображений/div рассчитывается в процентах.

Вот ссылка на мой существующий код: http://jsfiddle.net/PfzQ8/4/

Изменить: этот jsfiddle не является кодом проблемы, это просто код, который у меня есть в настоящее время, и я хотел бы расширить его.


person egr103    schedule 28.02.2012    source источник
comment
Я не думаю, что смогу воспроизвести вашу проблему на jsfiddle с помощью Chrome. Кроме того, вы хотите, чтобы изображение растягивалось, чтобы заполнить 100% доступного пространства, или масштабировалось пропорционально, чтобы заполнить 100% ширины или высоты?   -  person Kyle    schedule 28.02.2012
comment
не похоже, что вы пытались выполнить поиск в этой теме... есть множество решений, которые легко найти при быстром поиске   -  person charlietfl    schedule 28.02.2012
comment
@charlietfl Я считаю, что моя проблема отличается тем, что это гибкий макет, в котором я не знаю высоту своего контейнера и хочу масштабировать свое изображение примерно до 400% (например) от самого центра DIV. Поэтому думаю, что голосование против немного резкое, поскольку я не могу найти никаких решений для этого в StackOverflow. Я могу попробовать это решение, чтобы посмотреть, исправит ли оно: css-tricks.com/ сосредоточение на неизвестном   -  person egr103    schedule 01.03.2012
comment
Как примечание, этот метод на css-трюках не работал.   -  person egr103    schedule 01.03.2012


Ответы (1)


Я думаю, что за это проголосовали больше всего из-за моей формулировки, но после повторной публикации другого вопроса я нашел подходящий ответ, см. здесь: Масштабирование встроенного изображения от абсолютного центра его родителя?

person egr103    schedule 14.03.2012