Динамически загружает и изменяет размеры изображений

Question

HTML/Javascript - Я хочу загружать изображения динамически, а изображения, которые я собираюсь загрузить, могут иметь разные пропорции.

Я хочу, чтобы изображения вписывались в определенную область содержащего div - площадь 40% от ширины содержащего div и 80% ее высоты. Поскольку они имеют разные пропорции, конечно, они не всегда будут использовать всю эту область, но я хочу изменить их размер так, чтобы они не превышали границы. Но я не знаю заранее, должен ли я указывать ширину или высоту (и атрибут партнера для авто), так как я не знаю, какое соотношение сторон изображения будет раньше времени.

Есть ли способ CSS для этого? Или мне нужно вычислить требуемую ширину с помощью javascript?

PS Мне нужно сделать это только в Firefox 3.5!

Answer 1

Мое решение было обеспечить контейнер DIV, который будет привязан объект нужного размера:

#img_container { 
    width: 48%; 
    height: 80%; 
} 

Тогда для образа, сам я назначил максимальную ширину и максимальную-высоту, которые распознаются светлячок:

#img_container img { 
    max-width: 100%; 
    max-height: 100%; 
    display: block; 
} 

Таким образом, изображение автоматически настраивается максимум по ширине контейнера, но сохраняет правильное соотношение сторон. Ура!

Answer 2

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

Однако есть и другой способ. Запросите изображение, сообщив серверу о размерах пространства, которое у вас есть. Затем он может генерировать подходящую версию изображения и кэшировать ее перед отправкой изображения, которое уже имеет нужный размер до браузера.

Update Еще один способ, который может быть приемлемым для вас, чтобы установить контейнер DIV как так ...

.mydiv { overflow: hidden; } 

Затем установите изображение, которое будет фиксированной высотой и auto для ширины. Это приведет к обрезанию над широкими изображениями слева и справа от изображения. Если это приемлемо в вашем случае, то это очень простое решение.