Как адаптировать фотография под размер экрана

30

Wowk

13 июня 2016, 11:21

823

День добрый, подскажите пож-ста:

- Есть фото которые отображаются в виде баннеров

- Сделал баннер в фотошопе (формат jpeg верный ли ? ), сохранил для web? загрузил на созданную страницу сайта (информационную), размер 850, через комп смотрится отлично, а вот через планшет, ни говоря уже о мобильнике, слишком сильно вылезает.

Вопрос: Как правильно сделать, чтобы фото на всех устройствах корректно отображалась, ведь те же самые баннеры адаптируются?

247

altezzik

13 июня 2016, 11:24

#1

Если jpeg, то через css


img {

width:100%;

height:auto;

}

Вместо img можно добавить класс ваших баннеров

1

W

30

Wowk

13 июня 2016, 11:33

#2

altezzik:
Если jpeg, то через css

Код:
img {
width:100%;
height:auto;
}
Вместо img можно добавить класс ваших баннеров

Спасибо за ответ, подскажите, в какие строки правильнее вставить код..)

H

6

Hydropericard

13 июня 2016, 11:45

#3

в файле style.css(скорей всего, но может отличаться) вставляйте в самом конце не ошибетесь

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

<style>

img {

width:100%;

height:auto;

}

</style>

Но так делать не рекомендую)

1

W

30

Wowk

13 июня 2016, 12:57

#4

Hydropericard:
в файле style.css

Спасибо, как раз прямого такого нет, смотрю..)

H

6

Hydropericard

13 июня 2016, 14:08

#5

Может быть main, посмотрите в папке css. Или жмем на странице сайта F12 в блоке Styles смотрим путь, будет выглядеть примерно так ТАм будет и путь и название.

dropmefiles[точка]com/Wllh0

1

W

30

Wowk

13 июня 2016, 14:42

#6

Hydropericard:
<style>
img {
width:100%;
height:auto;
}
</style>
Но так делать не рекомендую)

Вообщем. вот таким способом и получилось сделать)

Открыл редактор страницы, там есть возможность посмотреть код html

Сама фотография находилась в <p><span.....</span></p>

Вот как раз перед </p> и вставил код выше, получилось как раз то что нужно...

От сюда еще один вопрос) почему вы не рекомендовали, и на что влияет такой способ?

Подскажите по заголовкам H1 Где найти скрипт - Увеличился ли у Вас

301

shurik0

13 июня 2016, 14:50

#7

altezzik:
width:100%;
height:auto;

Я пишу:

max-width:100%;

Чтобы маленькие картинки не растягивались.

2

Качественный хостинг по низкой цене. (http://goo.gl/MpjbKi)

247

altezzik

13 июня 2016, 14:54

#8

shurik0:
Я пишу:
max-width:100%;
Чтобы маленькие картинки не растягивались.

Согласен. Ценное замечание.

1

W

30

Wowk

13 июня 2016, 14:55

#9

altezzik:
<style>
img {
width:100%;
height:auto;
}
</style>
Но так делать не рекомендую)

Так а на что это повлияет и почему не рекомендовали...?

---------- Добавлено 13.06.2016 в 19:47 ----------

Еще не могу понять, почему логотип увеличивается в размерах при переходе на эту страницу....

W

30

Wowk

14 июня 2016, 17:10

#10

уже не актуально, спасибо всем кто ответил

В 2023 году Google заблокировал более 170 млн фальшивых отзывов на Картах

Что делать, чтобы попасть в ответы Google Bard