Подгонка родительского элемента изображения, преобразованного с помощью CSS. (Twitter Bootstrap)

Сейчас я использую Twitter Bootstrap в новом проекте. Основная часть проекта — это галерея эскизов, точно такая же, как в их примерах (здесь: http://twitter.github.com/bootstrap/components.html#thumbnails).

Проблема в том, что я в настоящее время преобразовываю (вращаю) изображения, когда это необходимо, в соответствии с их данными ориентации EXIF. Когда я применяю преобразование (используя сейчас -webkit-transform, поскольку я тестирую Chrome) к img, его родительский элемент остается прежним, а изображение «переполняет» его контейнер.

Используя Chrome, можно проверить это поведение, перейдя к примеру галереи миниатюр, на который я ссылался ранее, просмотрев одно из изображений-заполнителей и добавив свойство style="-webkit-transform: rotate(90deg)в тег img. Изображение переполняет элемент контейнера liи нарушает макет.

Есть ли способ решить эту проблему, чтобы загрузчик обрабатывал изображение, повернутое css, как если бы оно было изначально таким образом? Я думал вручную установить высоту и ширину тега img, и их родители будут корректировать, но я не могу знать, какой размер изображения будет отображаться на стороне сервера, прежде чем они

О, и, кстати, я знаю, что могу прибегнуть к ротации на стороне сервера, я знаю, что это не сложно, я просто предпочел бы сделать это в браузере, если это вообще возможно.

Есть идеи?

Спасибо!

РЕДАКТИРОВАТЬ: Яап предложил повернуть весь контейнер, что отлично сработало бы, если бы не тот факт, что у меня есть текстовые узлы внутри эскиза lis. Вращение контейнера также приведет к повороту текста.

7
задан malvim 30 May 2012 в 12:08
поделиться