Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Изменение размеров фотографии (https://javascript.ru/forum/dom-window/39757-izmenenie-razmerov-fotografii.html)

imediasun1 10.07.2013 22:26

Изменение размеров фотографии
 
Вложений: 2
Есть часть кода которая отображает фотографию на экране по заданным ширине и высоте

// Создаем объект FileReader и по завершении чтения файла, отображаем миниатюру и обновляем
            // инфу обо всех файлах (только в браузерах, подерживающих FileReader)
            if($.support.fileReading) {
                var reader = new FileReader();
                reader.onload = (function(aImg) {
                    return function(e) {
                        aImg.attr('src', e.target.result);
                        aImg.attr('width', 150);
			aImg.attr('height', 100);
                    };
                })(img);
                reader.readAsDataURL(file);
            }

В таком варианте вертикальная фотография отображается Искаженно,фотка растягивается по ширине. Как сделать так чтобы отображалась фотография полностью но в рамках 150х100, то есть если фотка вертикальная будет отображаться вся ее высота в рамке высоты 100 как на скриншоте во вложении

рони 10.07.2013 22:47

imediasun1,
так наверно вычислять новую ширину персонально для каждого рисунка (100* ширина рисунка)/высоту рисунка

ОлегА 12.07.2013 09:36

попробуйте обернуть картинки в div контейнеры и задать ему высоту и ширину 150х100

Deff 12.07.2013 16:02

<div style="width:150px;height:100px;display:inline-block;border:red solid 1px;vertical-align:top">
<img src="http://forum.mybb.ru/img/avatars/0000/14/1c/26768-1330199487.jpg" style="max-width:150px;max-height:100px;"/></div>

<div style="width:150px;height:100px;display:inline-block;border:red solid 1px;vertical-align:top">
<img src="http://4put.ru/pictures/max/298/916560.jpg" style="max-width:150px;max-height:100px"/></div>


Часовой пояс GMT +3, время: 06:42.