[X] Помощник

[newbies Topic Starter]

Делаю красивый вывод фото, все знают что фото разные, вытянутые по вертикали или по горизонтали или вообще квадратные.
Система на который делают сайт фраемворк кохана.

Пример фоток
[img]http://i.pixs.ru/thumbs/3/4/0/16553jpg49_9956084_10350340.jpg[/img]

Сайт на кохане, допустим загружаем мы фото, все загрузилось, вставилось сам вывод фото можно изменить через css, но если .class img {366px; height: 250px;} задать размеры фотке то она будет искажаться, что не есть хорошо.

Как можно реализовать вот так, та часть что прозрачная прячиться. и показываем определенную часть которая задана через css по размерам width: 366px; height: 250px;
[img]http://i7.pixs.ru/thumbs/3/6/8/565613jpg9_9488379_10350368.jpg[/img]

Читать что много есть вариантов.

Я реализовал так:

у самих фото размер сторон не ниже чем 500px, то есть ни одна сторона не ниже чем 500px

css


HTML

<div class="apartfoto">
<img style="background: url(/media/uploads/quarters/<? echo ($quarter['main_img']) ? 'small_'.$quarter['main_img'] : 'apartnofoto.jpg'; ?>) center center">
</div>

style="background: url(...........) center center">

center - показывает центр фотографии заданным по параметрам
width: 366px;
height: 250px;

а сама фотка 500px на 600px или 500px на 500px

все отлично работает, но есть одно но, не показывает фото в фаерфоксе, в опере есть, в ie есть, в хроме есть.

Как все это выглядит:
[img]http://i7.pixs.ru/thumbs/4/2/2/Bezimyann7_4280634_10350422.jpg[/img]

Может как то по другому можно реализовать задачу ?

Вот еще вариант, но работает не ровно по центру и минус в том что бордер закруглены края не работает.

вариант с центрованием

.apartfoto {
width: 366px;
height: 250px;
overflow: hidden;
border: 1px solid #FFDDEF;
margin: 10px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-html-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.apartfoto img {
top: 50%;
margin-top: -100px;
left: 50%;
margin-left: -100px;
max-width: 500px;
max-height: 500px;
}

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.