Перейти к содержимому

Сервис обмена электронных валют

Партнерская программа Kredov

Фото разных размеров, как сделать через css, вывод фото с одинаковыми пропорциям

#1 newbies

newbies
  • Пользователь
  • 2 сообщений
  • Репутация: 0
0

Отправлено 08 Январь 2014 - 09:27

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

Пример фоток
Изображение

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

Как можно реализовать вот так, та часть что прозрачная прячиться. и показываем определенную часть которая задана через css по размерам width: 366px; height: 250px;
Изображение

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

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

у самих фото размер сторон не ниже чем 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 есть, в хроме есть.

Как все это выглядит:
Изображение

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

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

вариант с центрованием
.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;
}

 

 

  • 0


Оформление форума – IPBSkins.ru