3

Уважаемое сообщество, подскажите пожалуйста куда копать? Проблема заключается вот в чем:

Есть фотографии из соц сетей (вконтакте, инстаграм например). Изображения вытаскиваются из api, и обычно в ответе от api присутствует thumbnail фотографии (src_small к примеру). В случае с инстаграмом всё отлично - там по дефолту квадратные изображения. В случае с остальными соц сетями - изображения там какие попадутся.

Так вот в чем вопрос: возможно ли средствами css отображать только квадратную область изображения ? Просто обрезать на сервере - довольно трудозатратная операция, если фотографии будут грузиться пачками по 20 (например). И если будет много пользователей делать это одновременно, страшно подумать что случится с моим дешевым хостингом (а пока вообще бесплатным) :)

1 ответ 1

3

Осмелюсь как вариант предложить такой индусский код: http://jsfiddle.net/ptEy8/

Но очень хотелось бы увидеть ещё варианты! Хороший вопрос.

7
  • О боже, это работает :) Спасибо гигантское :)
    – papagaj
    5 авг 2013 в 17:58
  • Я сделал crop на сервере just for fun, интересно замерить - как будет нагружаться сервер) по сути - изображения небольшие ~100px в ширину, и кропает он их довольно быстро)
    – papagaj
    5 авг 2013 в 18:01
  • Вообще идеально было бы: - задать height и width картинки от родителя в 110%; - отцентровать ровно по середине; - задать родителю overflow: hidden;
    – ferrari
    5 авг 2013 в 18:03
  • Вот будет лучше, мне кажется: jsfiddle.net/SDesN
    – ferrari
    5 авг 2013 в 18:10
  • jsfiddle.net/pechenushka/SDesN/1 во втором случае изображение искажается) а в 1м отображает как раз то что нужно)
    – papagaj
    5 авг 2013 в 18:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.