Web въпрос-че за визия на изображения

[glowndark]

Накратко. Има сайт на които има примерно 20-изображения, КОИТО ОБАЧЕ с различни размери. При тези които са с пропорции на квадрат, проблеми няма, обаче при правоъгълните, се получава или смачкване или разтягане на изображението, защото в сайта за "ПРЕВЮ" на изображенията са зададени размери на изображенията пр. 200х200.
Проблема ми е да накарам малките изображения да изглеждат добре, без значение от пропорциите им, като същевременно те се визуализират в квадрат 200х200.

П.С. Всъщност решението съм го виждал по-други сайтове. Просто снимката в квадрата(200х200) не се мачка до този размер, а се смалява по вертикала(или хоризонтала) до 200px, а останалата част просто не се вижда... Още нещо, това трябва да стане, без каквато и да е физическа манипулация от страна на сървъра...

[nikolin]

Щом решението си го виждал на друго място не можеш ли да вземеш кода и да го приспособиш ? А в какъв формат са снимките ? Ако са jpg и са доста под 200 при разтягането би следвало да се размажат ( или се лъжа ) ?

Искаш снимките да се обработят като обект и след това да се подават към Preview ?

[biro]

Аз бих препоръчал да се ползва оразмеряване от страна на сървъра, но щом не искаш да го правиш по този начин, тогава направи следното:

Огради снимките в <div> със зададен фиксиран квадратен размер 200х200.
След това приложи CSS клас към самия <img> tag със зададени максимална височина и ширина max-width, max-height съответстващи на div-a.
Центрирай снимката в средата на div-a и задай някакъв фон на самия div - например бяло.
Ето и кода:

<style>
.thumbHolder { background-color:#fff; display:table-cell; float:left; height:200px; text-align:center; vertical-align:middle; width:200px; }
.thumbHolder .thumb { max-height:200px; max-width:200px; }
</style>

<div class="thumbHolder">
 <img class="thumb" src="https://forum.setcombg.com/index.php...2;type=avatar" />
</div>
<div class="thumbHolder">
 <img class="thumb" src="https://forum.setcombg.com/index.php...3;type=avatar" />
</div>

[peterstamov]

Вриант...
Функция на програмния език с който работиш, която прави следното:
- Дава ти инфо за височината и широчината на снимката - ако и двете са по-малко от 200 пикс - нямаш проблем. Ако примерно височината е по-голяма от 200, а широчината е по-малка, то намаляш височината до 200, а широчината я смяташ пропорционално на променената височина. Като се показва снимката задаваш вече новите стойности!

[glowndark]

Благодаря за отговорите. Мисля, че с варианта на @biro нещата ще се получат.

Иначе в варианта които гледах, сървъра реже малките картинки, до квадрат...