Вход • Регистрация

Отображение превью

  •
  • 09 февраля 2012 г.
  • Здравствуйте всем! Настраиваю галерею и возникла небольшая проблема. Как я понял, превьюшки создаются простым ресайзом добавляемого изображения, а как сделать, чтобы оно обрезалось (crop). Хорошо, когда картинки все горизонтальные, но некоторые есть нестандартные, квадратные и вертикальные. И всё это в списке изображений категории не очень ровно смотрится, картинки "прыгают". Допустим, есть стандарт у превью - ширина 200px и высота 150px, было бы правильнее, если бы вертикальные фотки обрезались под этот размер. Что отвечает за ресайз и где включить обрезку? Заранее благодарю!
    •
    • 09 февраля 2012 г.
    • Тут лучше не так действовать. Оставьте все как есть, автоматический ресайз без пропорций - плохое решение.
      Оберните каждую картинку в div и сделайте для этого слоя такой стиль:
      Код
      height: 150px;
      width: 250px;
      overflow: hidden;

      И все. Ненужная часть высоких картинок будет скрываться. Все будет ровно и красиво.
      •
      • 09 февраля 2012 г.
      • Слушайте, что-то я про overflow совсем забыл. Попробую, спасибо большое. Просто первой мыслью было копание в программной части, хотел как в Highslide обрезает.

        Кстати, всем пользователям, если добавить атрибут title к ссылке на фото и в нём написать '.$row["anons"].' (соответственно сам div анонса закомментировать в photo.view.php), то у всплывающей большой фотографии будет описание.
      •
      • 09 февраля 2012 г.
      • А разве в таком случае скрывается ровными частями верхняя и нижняя?
        Я думал, что только нижняя часть обрезается.
        •
        • 09 февраля 2012 г.
        • По умолчанию да.
          Но можно прописать стилем
          Код
          .div img {}

          и задать любое положение картинки в этом слое.
          •
          • 09 февраля 2012 г.
          • Хм, не знал.
            А какие именно команды? Например имеем картинки высотой 309px и 262px. Нужно, чтобы они были высотой 200px и при этом вверху "срезалось" 60%, а внизу 40% у каждой картинки.
            • 09 февраля 2012 г.
            • http://htmlbook.ru/css
              Добавьте в закладки и начните изучение прям с первой главы
              • 09 февраля 2012 г.
              • Имеете в виду что-то кроме margin и padding? Можете уточнить?
              •
              • 10 февраля 2012 г.
              • Отличный ответ : +5.
                Вообще у меня раньше 2 документа валялось Документации по CSS и HTML. В которые я иногда подглядывал. Теперь информация устарела и я использую для подглядывания именно этот сайт. Самая актуальная и лучшая информация по этому вопросу именно там.
  •
  • 09 февраля 2012 г.
  • Обрезать сверху - отрицательными маржинами/педдингами, не есть хорошо, считаю.

    Как вариант - пихать картинку в фон, и позиционировать фон соответственно center center например.
    • 09 февраля 2012 г.
    • Это собственно относится к варианту с "оберните каждую картинку в div и overflow hidden.
  •
  • 17 марта 2012 г.
  • Оборачивание дивом может и есть решение, но вот если картинки могут быть как горизонтальными так и вертикальными, то становится вопрос как быть тут... квадрат тут не получишь, так как для вуртикальных картинок надо указывать ширину требуемого квадрата, а для горизонтальных - высоту... или заведомо фотографии делать большего размера, что не есть хорошо... всетаки функция кропа была бы ультро полезной
    • 17 марта 2012 г.
    • я пока обхожусь тем что засовываю картинку в фон дива. и позиционирую ее по центру
      •
      • 18 марта 2012 г.
      • лучше уж overflow: hidden. Так хоть картинка будет, а не фон
        •
        • 18 марта 2012 г.
        • не всегда подходит

          Потому как в таком случае всегда будет скрываться нижняя и правая часть изображения. А далеко не всегда верхний левый угол отражает хоть немного то что требуется, в отличие от центра изображения, где чаще всего показано самое главное.
          И ни абсолютным позиционированием ни отрицательными маржинами тут не спастись, потому как просто невозможно угадать формат загружаемого изображения.
          •
          • 18 марта 2012 г.
          • На этапе вывода изображения определяете размеры и прописываете нужные стили для позиционирования по центру.
            Все-таки вставлять img лучше во всех планах, чем фоном лепить
          •
          • 18 марта 2012 г.
          • Мне помогает такая связка в класс картинки в слое, где overflow:hidden
            Код
            width: 200px; //или сколько там надо
            height: auto;
            margin-top:-30%;
            •
            • 18 марта 2012 г.
            • Есть риск, когда фотка горизонтальная, что нижняя часть элемента с overflow: hidden будет пустая.
              •
              • 18 марта 2012 г. , редакция: 18 марта 2012 г.
              • Ну
                Код
                width: 200px; //или сколько там надо
                height: auto;
                margin-top:-20%;


                Все ж зависит от пропорций. Совсем узкие горизонтальные все равно шиш подгонишь...
          •
          • 19 марта 2012 г.
          • Да именно по середине фото находится грудь девушки
    • 17 марта 2012 г.
    • Цитата
      всетаки функция кропа была бы ультро полезной
      А я лично считаю с точностью до наоборот. Функция кропа была бы как палка в колесе. Любой автомат - зло. Трясетесь над сайтом - приводите все картинки к единому формату и пропорциям в фотошопе.
      •
      • 17 марта 2012 г.
      • О_о зачем для кропа одинаковые пропорции? Кропать можно любую картинку независимо от пропорций и трастись не надо... береш параметры превью, по их данным кропиш изображение и уменьшаешь до нужного... где тут опасность в варинте пропорций?
        А совать контентную картинку в фон не есть путь джедая. Какртинка это картинка - она не является элементом оформления, она - контент.
        •
        • 18 марта 2012 г.
        • Дануна?
          Ну давайте, опишите мне алгоритм автоматического кропа, которому можно скормить эти три картинки и на выходе получить одинаковые горизонтальные 120*240, и чтобы пол-башки нигде не срезалось...
          • 18 марта 2012 г.
          • Я за ВЫБОР. Хочется - кропится (для мебели например, для "ковров" всяких". А хочется - ресайзится.
          •
          • 18 марта 2012 г.
          • хех... уел... алгоритм распознания лица будет потяжелее самой cms ))
          •
          • 18 марта 2012 г.
          • зы: как вариант в таких случаях разрешить превью загружать отдельно?

Новости

  • Вышла очередная сборка DIAFAN.CMS 7.2.2
  • 18 июня
  • В сборке большое обновление demo-шаблона, дополнительная защита от спама, улучшение YML-импорта и еще много важного и интересного.
  • Не пропустите сборку DIAFAN.CMS 7.1.4
  • 24 апреля
  • В новой сборке совершили революцию в структурировании кастомизированной информации в шаблонах, добавили авторегистрацию пользователей, усовершенствовали защиту от спама, актуализировали накопительную скидку, а также улучшили производительность и стабильность работы системы.
  • Сборка DIAFAN.CMS 7.1.3
  • 12 января
  • После выхода сборки 7.1 мы выпустили уже три патча, в каждом из которых улучшаем административную часть сайта. Сборка DIAFAN.CMS 7.1.3 уже доступна к установке. 
Все новости

Форум

Перейти на форум