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


Пользователь месяца
TimurR TimurR 1-й за Август
Очков активности: 726 3 темы, 35 сообщений, 11 баллов репутации
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 207 2 темы, 17 сообщений, 6 баллов репутации

  • Фотография Ixman
    #2

    Ixman (o5cat.ru)
    Очков активности: 105 0 тем, 10 сообщений, 7 баллов репутации

  • Фотография WGN
    #3

    WGN (worldgamenews.com)
    Очков активности: 90 Вне конкурса за определение пользователя месяца

  • Фотография magnet
    #4

    magnet (rbfxdirect.com)
    Очков активности: 67.5 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #5

    BLIK
    Очков активности: 45 Вне конкурса за определение пользователя месяца

  • Фотография TimurR
    #6

    TimurR
    Очков активности: 42 Вне конкурса за определение пользователя месяца

  • Фотография AnnaYa
    #7

    AnnaYa (topbase.ru)
    Очков активности: 33 2 темы, 5 сообщений, 2 балла репутации

  • Фотография Developer
    #8

    Developer
    Очков активности: 33 2 темы, 16 сообщений, 1 балл репутации

  • Фотография Алексей111
    #9

    Алексей111
    Очков активности: 28.5 5 тем, 4 сообщения, 1 балл репутации

  • Фотография Игорь Ку
    #10

    Игорь Ку (dudesday.ru)
    Очков активности: 24 1 тема, 5 сообщений, 2 балла репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 24.09.2018
Топ 5 участников по репутации


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

#1 newbies

newbies
  • Неактивные
  • 2 сообщений
  • Репутация: 0
0

Отправлено 08 January 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