Форум Сайтостроение Веб-строительство

Как задать ширину изображений на адаптивном сайте?

12
Onix03
На сайте с 11.07.2012
Offline
85
Onix03
1107

Уважаемые специалисты!

Помогите задать ширину фото на адаптивном сайте.

Проблема в том, что фото на сайте (при просмотре с мобильных устройств) выходит за пределы ширины экрана, т.е. появляется горизонтальная прокрутка (это плохо). В десктопной версии все нормально!

Пример страницы (смотреть со смартфона) http://oniksmarket.ru/catalog/electron фотка внизу раздела "вылазит" вправо за экран.

Если не ошибаюсь, в CSS задается. Я не программист, поэтому если можно, поподробнее что и куда. Помогите, пожалуйста!

MoMM
На сайте с 16.06.2006
Offline
727
MoMM
#1

в %%..............

Onix03
На сайте с 11.07.2012
Offline
85
Onix03
#2
MoMM:
в %%..............

а какой параметр изменять?

MoMM
На сайте с 16.06.2006
Offline
727
MoMM
#3

width:

...........

D.iK.iJ
На сайте с 26.05.2013
Offline
229
D.iK.iJ
#4

/ru/forum/920228

А если коротко, можно просто вставить в <img

style="width: 100%; height:auto; max-width:704px; max-height:251px;"

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).
Onix03
На сайте с 11.07.2012
Offline
85
Onix03
#5

А есть способ через CSS задать?

---------- Добавлено 12.02.2016 в 09:10 ----------

MoMM:
width:
...........

можете подробнее ответить?

tommy-gung
На сайте с 22.11.2006
Offline
295
tommy-gung
#6

например, так


@media (max-width:768px) {
img {
max-width:90%;
}
}
Здесь не могла быть ваша реклама
TF-Studio
На сайте с 17.08.2010
Offline
334
TF-Studio
#7
Ihory:
какая CSS у тебя?

Блестяще!..

---------- Добавлено 12.02.2016 в 14:08 ----------

Onix03, дело даже не в фотке.

у вас весь дизайн не адаптивный.

Решайте комплексно задачу

Всё ещё лучший способ заработка для белых сайтов: GoGetLinks (https://www.gogetlinks.net/?inv=fahbn8).
Onix03
На сайте с 11.07.2012
Offline
85
Onix03
#8
TF-Studio:
Блестяще!..

---------- Добавлено 12.02.2016 в 14:08 ----------

Onix03, дело даже не в фотке.
у вас весь дизайн не адаптивный.
Решайте комплексно задачу

Да ну!?

Тест Яндекса и Гугла прохожу на адаптивность! (в Яндексе за исключением страниц с фото)

---------- Добавлено 12.02.2016 в 17:57 ----------

tommy-gung:
например, так

Спасибо попробую! Что интересно, если ставлю фото в карточку товара, все ОК

А когда в категорию (группу) товара, как в примере, то фотка "вылазит"!

Проблема решается, если ставить маленькие фото, но на ПК не очень смотрится!

Дублирование контента в ИМ, Прошу просмотреть сайт обновил virtuemart с 2.0.12
H
На сайте с 08.02.2016
Offline
7
Hanke
#9
tommy-gung:
например, так

@media (max-width:768px) {
img {
max-width:90%;
}
}

Но так как задана определенная высота нужно задать

height:auto;

чтобы картинка не расплылась :)

Onix03
На сайте с 11.07.2012
Offline
85
Onix03
#10
Hanke:
Но так как задана определенная высота нужно задать

чтобы картинка не расплылась :)

Всем спасибо!

Прописал

@media (max-width:768px) {

img {

max-width:90%; height:auto;

}

}

все встало на места!

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий