Создание миниатюр из изображения src

Мне нужно создать несколько превью на основе слайд-шоу. Эти превью создаются непосредственно / динамически из img src для каждого слайда.

Теперь я создаю такой код для галереи превью:

<ul id="galThumb">
<li id="thumb0"><img src="path-to-image" title="Image[0]"></li>
<li id="thumb1"><img src="path-to-image" title="Image[1]"></li>
<li id="thumb2"><img src="path-to-image" title="Image[2]"></li>
...
<li id="thumbn"><img src="path-to-image" title="Image[n]"></li>
</ul>

Элементы li оставлены плавающими, чтобы получилась горизонтальная линия с ними.

Моя проблема в том, что пользователи могут загружать изображения любого размера и ориентации, и я не могу правильно контролировать аспект больших пальцев. Мне нужно, чтобы все пальцы имели определенный размер. Например, 60x45px.

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

Я много искал здесь и нашел несколько полезных скриптов, но ни один не достиг этой цели.


javascript orientation aspect-ratio
person BeatLaG    schedule 21.05.2012    source источник
comment
Если изображение не соответствует форме, которую вы выделили для больших пальцев, вы можете обрезать или растянуть. При кадрировании часть содержимого будет отключена для просмотра. Растягивание сделает изображение растянутым в одном измерении. Если вы хотите, чтобы все изображения независимо от формы заполняли ваше пространство 60x45 пикселей, вам нужно выбрать один из этих двух вариантов. Что вы хотите выбрать?   -  person jfriend00    schedule 21.05.2012

Ответы (4)


arrow_upward
1
arrow_downward

Мне нравится jQuery NailThumb. Он очень настраиваемый и простой в использовании.

person André Gil    schedule 21.05.2012

arrow_upward
0
arrow_downward

Вы можете указать ширину / высоту для каждого изображения с помощью jQuery. Переберите элементы <li>, получите соотношение сторон для каждого изображения, установите одинаковую высоту для каждого изображения и установите с в соответствии с соотношением сторон.

person Hidde    schedule 21.05.2012

arrow_upward
0
arrow_downward

Вы можете назначить изображения в качестве фона, а затем использовать CCS3 background-size: cover, чтобы они идеально заполняли пальцы. Затем используйте фильтр IE для обратной совместимости.

Эта статья объясняет это лучше всего: http://css-tricks.com/perfect-full-page-background-image/

Для этого не потребуется JavaScript.

person Drew Baker    schedule 21.05.2012

arrow_upward
0
arrow_downward

Попробуйте эту простую функцию, о которой я упоминал здесь: https://stackoverflow.com/a/14731922/382536

/**
* Conserve aspect ratio of the orignal region. Useful when shrinking/enlarging
* images to fit into a certain area.
*
* @param {Number} srcWidth Source area width
* @param {Number} srcHeight Source area height
* @param {Number} maxWidth Fittable area maximum available width
* @param {Number} maxHeight Fittable area maximum available height
* @return {Object} { width, heigth }
*/
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

    var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);

    return { width: srcWidth*ratio, height: srcHeight*ratio };
}
person Jason J. Nathan    schedule 22.04.2014