Изменить размер изображения Чтобы установить экран

Question

У меня есть изображение в виде заголовка, который, когда экран меньше, например, когда сайт просматривается на iPhone или iPad, изображение слишком велико для экрана.

Изображение охватывает навигацию и делает сайт непригодным для использования.

Мне нужно найти способ изменить размер изображения, соответствующий размеру экрана.

Как бы я это сделал?

Answer 1

Я предполагаю, что ваш контейнер имеет ширину жидкости 100% и может прекрасно адаптироваться для разных размеров экрана. В этом случае вы можете использовать

img { 
    max-width: 100%; 
} 

и изображение никогда не будет превышать его ширину родительского контейнера.
Или некоторые из более сложных решений от отзывчивой области дизайна:

• Adaptive Images
• Picturefill

Answer 2

Вы можете использовать медиа-запрос в CSS.

В этом примере, когда ширина экрана меньше, чем 1024px он установит изображения максимальной ширину OT 100% от родительского элемента:

@media screen and (max-width: 1024px){ 
    img { max-width: 100% } 
} 

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

В {} можно создать что-нибудь еще.

Но он по-прежнему загружает полное изображение для пользователя.

Подробнее о медиа-запросах here.