есть код, с кликабельными превьюшками; размер превьюшки задается пропорционально родительского блока с рамкой:
css:
div.thumb {
background-color: #F9F9F9;
border: 1px solid #CCCCCC;
font-size: 94%;
overflow: hidden;
padding: 3px 5px 3px 3px !important;
margin-left: auto;
margin-right: auto;
margin-bottom: 0.5em;
}
.thumbimage {
border: 1px solid #CCCCCC;
width: 100%
}
.thumbcaption {
font-size: 94%;
line-height: 1.4em;
padding: 3px !important;
text-align: left;
}
.magnify {
float: right;
display: block;
}
и разметка:
<div class="thumb" style="width:200px;">
<a rel="colorbox" href="http://upload.wikimedia.org/wikipedia/ru/6/6a/Anakin_Skywalker.jpg">
<img class="thumbimage" src=".http://upload.wikimedia.org/wikipedia/ru/6/6a/Anakin_Skywalker.jpg" alt="Нажмите для увеличения">
</a>
<div class="thumbcaption">
<img class="magnify" width="15" height="11" alt="" src="/images/magnify-clip.png">
<b>>Юный Дарт Вейдер</b>
</div>
</div>
в данном коде размер блока задан по ширине внешней рамки — а изображение масштабируется. Нужно наоборот и без явного указания размера:
что бы размер блока подставлялся автоматически исходя из размера изображения.
Для html 4(Для html5 решение нагуглилось сразу). Очень хочется добавить к вышеуказанному коду класс и получить желаемый универсальный результат.
например для картинки меньшего размера:
upload.wikimedia.org/wikipedia/ru/thumb/6/6a/Anakin_Skywalker.jpg/200px-Anakin_Skywalker.jpg 
Простой
