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

Выравнивание изображений товара в магазине

  •
  • 12 октября 2017 г.
  • См. фото, проще один раз увидеть вопрос.

    код элемента:

    Код
    .catalog__item{
    overflow: hidden;
    _margin: 26px 0 0;
    padding: 5px 5px;
    width: 360px;
    float: left;
    min-height: 520px;
    }
    .catalog__item:first-child{
    margin: 0 10px 0 0;
    }
    .catalog__item__pic{
    position: relative;
    float: left;
    _border: 1px solid #ecf0f1;
    width: 340px;
    height: 230px;
    text-align: center;
    line-height: 196px;
    }
    .catalog__item__img{
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
    border:1px solid #D6D5D5;
    padding:5px;
    }
    •
    • 12 октября 2017 г.
    • Пациента покажите.

      Опять же из ваших объяснений непонятно: вы хотите, чтобы картинка обрезалась и заполняла все пространство?
      Или как-то иначе?

      Вообще, заливайте картинки под ширину и высоту нужного блока, тогда будет все ровненько и красивенько.
      •
      • 12 октября 2017 г. , редакция: 12 октября 2017 г.
      • Чтобы заполняла все пространство по максимальному габариту. Обрезать ничего не надо. При "портретной" ориентации картинки рамка всё равно должна быть "альбомная". Сайт - korobkavrn.ru
        •
        • 12 октября 2017 г.
        • Код

          .catalog__item__pic {
          position: relative;
          float: left;
          border: 1px solid #ecf0f1;
          width: 340px;
          height: 230px;
          text-align: center;
          line-height: 196px;
          }
          .catalog__item__img {
          width: auto;
          height: 100%;
          vertical-align: middle;
          padding: 5px;
          }
          • 12 октября 2017 г.
          • Не помогло.
            •
            • 12 октября 2017 г. , редакция: 12 октября 2017 г.
            • А Вы точно заменили стили на мои, а не дополнили их тем, что посчитали нужным?

              P.S. лично я вижу что задача вроде как решена
              • 12 октября 2017 г. , редакция: 12 октября 2017 г.
              • Сначала заменил "как посчитал нужным", после вашего поста закомментировал свои записи и полностью скопировал код. Эффект тот же.
              • 12 октября 2017 г. , редакция: 12 октября 2017 г.
              • Что то я не совсем понял тогда в чем же дело?
                Что хотите сделать, конкретней тогда опишите, т.к. насколько это понял я, задача решена. Выше скрин, доказывающий это.

                P.S. Только что увидел от Вас скрин, кэш очистите.

Новости

  • Вышла очередная сборка 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 уже доступна к установке. 
Все новости

Форум

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