Высота адаптивного изображения

Тема в разделе "Верстка", создана пользователем fortuner, 27 май 2015.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. fortuner

    fortuner

    Регистр.:
    26 июн 2012
    Сообщения:
    396
    Симпатии:
    364
    Здравствуйте!
    Столкнулся с такой проблемой:
    [​IMG]
    Изображение-обложка - адаптивное. Если вставить блок с дополнительными изображениями, то ломается верстка (см картинку). Как сделать так, чтобы высота заглавного изображения (product_img) изменялась при наличии блока с доп. изображениями (product_additional_img)? Т.е. чтобы уменьшалась заглавная картинка а не увеличивался весь блок (product)?

    HTML:
    <div class="product">
    <div class="product_img">
    /*Тут картинка товара*/
    </div>
    <div class="product_additional_img">
    /*Тут дополнительные изображения*/
    </div>
    </div>
    Гуглил, но лыжи не едут:(
     
  2. 628116

    628116 Создатель

    Регистр.:
    14 апр 2013
    Сообщения:
    15
    Симпатии:
    0
    не совсем понятно описали ситуацию. нет css кода и т.д.
    лучше покажите на сайте как оно работает, ну или css этих блоков выложите
     
  3. tovGANs

    tovGANs Создатель

    Регистр.:
    19 июн 2012
    Сообщения:
    33
    Симпатии:
    3
    Заменять скриптом высоту product_img, при наличии блока product_additional_img. Или изначально прописать в дополнительные картинки заглавную, чтобы блок product_additional_img всегда был, хоть там даже одна картинка.
     
    fortuner нравится это.
  4. incos2009

    incos2009 Писатель

    Регистр.:
    20 май 2015
    Сообщения:
    5
    Симпатии:
    3
    .product_img - CSS в студию. Размер изображения как задан ? В % соотношений или принудительно?

    Ткну пальцем в небо, можно попробовать подобный вариант:

    .product{
    max-height:320px; /* Высоту на бум написал, надо проверять какая подойдёт именно Вам */
    }

    .product_img{height:100%}

    Но вообще не видя css действительно тяжело дать цельный совет
     
    fortuner нравится это.
  5. fortuner

    fortuner

    Регистр.:
    26 июн 2012
    Сообщения:
    396
    Симпатии:
    364
    Спасибо! Но так уже пробовал:
    Все размеры заданы в процентах, а блок дополнительных изображений статично (70px), то есть если задавать статичный размер, то нужно для каждого разрешения прописать через @media.
    Попробую сегодня через условие [class1]+[class2], как думаете может выйдет?


    Я не очень в джаваскипте силён, можете черкнуть, если не сложно? Тоже попробую, спасибо!
     
  6. tovGANs

    tovGANs Создатель

    Регистр.:
    19 июн 2012
    Сообщения:
    33
    Симпатии:
    3
    В скриптах я тоже не силён. Знаю и видел, что подобное делали. Но я не любитель использовать скрипты, стараюсь по максимум использовать верстку.
    Использование media для таких вещей на мой взгляд не целесообразно. Разрешений много, и их количество растет с появлением новых моделей.
    Есть еще вариант с позиционированием - блок с доп фотками всплывал по hover на родителя картинки и всплывал бы внизу на самой картинке.
     
  7. incos2009

    incos2009 Писатель

    Регистр.:
    20 май 2015
    Сообщения:
    5
    Симпатии:
    3
    Вы ведь моё сообщение не прочитали по быстрому и заметили, что я говорю про позиционирование "MAX-HEIGHT" ? Неужели не помогло?
    И всё-таки, где же css ? Предоставьте, посмотрим.
    Общаться так вот на шару глядя в небо невероятно трудно.
    Или дайте ссылку на свой ресурс в сети, посижу поколдую, вдруг чего получится
     
  8. fortuner

    fortuner

    Регистр.:
    26 июн 2012
    Сообщения:
    396
    Симпатии:
    364
    Вот примерный код HTML:
    HTML:
    <div class="product">
    <div class="product_img">
    /*Тут картинка товара*/
    </div>
    <div class="product_additional_img">
    /*Тут дополнительные изображения*/
    </div>
    </div>
    CSS:
    Код:
    .product-img {display: block;
    width: 100%;
    height: auto;
    }
    .product_additional_img {
    position: relative;
    width: 100%;
    height:60px;
    }
    Долго думал как побороть, получилось так:
    Код:
     .product_img:not(:last-child) {padding: 0 30px;}
    Логика такая: если кроме дива картинки в родительском диве есть что-либо еще, делаем отступы по бокам.
    Поскольку картинки товаров квадратные, то отступы слева и справа при сохранении пропорций уменьшают картинку снизу и сверху на 30px, в сумме 60px.
    Остальные элементы не затрагиваются и все остается красиво и адаптивно:
    [​IMG]
    При наличии блока картинка становится меньше на заданную высоту, при отсутствии - занимает все доступное место. Все ровненько и аккуратненько.
    И кода одна строчка.
    Спасибо, друзья!
     
  9. liliana2

    liliana2 Писатель

    Регистр.:
    27 апр 2013
    Сообщения:
    3
    Симпатии:
    0
    max-width для изображения
     
  10. fortuner

    fortuner

    Регистр.:
    26 июн 2012
    Сообщения:
    396
    Симпатии:
    364
    Не совсем понял, как тут можно сделать с max-width
    Вот так все работает:
     
Статус темы:
Закрыта.