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

[fortuner]

Здравствуйте!
Столкнулся с такой проблемой:

Изображение-обложка - адаптивное. Если вставить блок с дополнительными изображениями, то ломается верстка (см картинку). Как сделать так, чтобы высота заглавного изображения (product_img) изменялась при наличии блока с доп. изображениями (product_additional_img)? Т.е. чтобы уменьшалась заглавная картинка а не увеличивался весь блок (product)?

<div class="product">
<div class="product_img">
/*Тут картинка товара*/
</div>
<div class="product_additional_img">
/*Тут дополнительные изображения*/
</div>
</div>

Гуглил, но лыжи не едут

 

[628116]

не совсем понятно описали ситуацию. нет css кода и т.д.
лучше покажите на сайте как оно работает, ну или css этих блоков выложите

 

[tovGANs]

Заменять скриптом высоту product_img, при наличии блока product_additional_img. Или изначально прописать в дополнительные картинки заглавную, чтобы блок product_additional_img всегда был, хоть там даже одна картинка.

 

[incos2009]

Здравствуйте!
Столкнулся с такой проблемой:

<div class="product">
<div class="product_img">
/*Тут картинка товара*/
</div>
<div class="product_additional_img">
/*Тут дополнительные изображения*/
</div>
</div>

Гуглил, но лыжи не едут

.product_img - CSS в студию. Размер изображения как задан ? В % соотношений или принудительно?

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

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

.product_img{height:100%}

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

 

[fortuner]

.product_img - CSS в студию. Размер изображения как задан ? В % соотношений или принудительно?

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

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

.product_img{height:100%}

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

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

Заменять скриптом высоту product_img, при наличии блока product_additional_img. Или изначально прописать в дополнительные картинки заглавную, чтобы блок product_additional_img всегда был, хоть там даже одна картинка.

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

 

[tovGANs]

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

 

[incos2009]

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




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

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

 

[fortuner]

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

Вот примерный код 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.
Остальные элементы не затрагиваются и все остается красиво и адаптивно:

При наличии блока картинка становится меньше на заданную высоту, при отсутствии - занимает все доступное место. Все ровненько и аккуратненько.
И кода одна строчка.
Спасибо, друзья!

 

[liliana2]

max-width для изображения

 

[fortuner]

max-width для изображения

Не совсем понял, как тут можно сделать с max-width
Вот так все работает:

Вот примерный код HTML:
Долго думал как побороть, получилось так:

 .product_img:not(:last-child) {padding: 0 30px;}