Изображения с жидкостью не правильно масштабируются

Question

У меня проблема с моей жидкостной конструкцией. Вот мой тестовый сайт - www.lync-star.com

Вы заметите, что при уменьшении окна браузера все изображения будут масштабироваться правильно.

Однако, когда экран становится меньше (примерно звонит размер 360 х 640), изображения очень малы по сравнению с текстом и заголовков (например, верхнее изображения)

Как я могу обойти эту проблему ? мне нужно использовать медиа-запросы, чтобы загрузить другое изображение, которое намного больше?

Надеюсь, что это имеет смысл?

Бест, р

Answer 1

Это пропорции изображения. Если ваше изображение составляет ~ 800x270, и оно имеет max-width100%, то оно будет сохранять эти пропорции по мере уменьшения ширины изображения. Вам либо нужно использовать медиа-запросы, чтобы уменьшить размер текста по мере того, как страница становится меньше, либо вам нужно загружать изображение с различными проприортами.

В любом случае, это то, как вы могли бы сделать это

media(min-width: 768px) // Obviously, change 768 to whatever you desire 
{ 
    // Any rules applied inside of this media(){} block will be 
    // applied on browser windows wider than 767px 
    div#header_img 
    { 
     background-image: url('path/to/img.png'); // Normal header image 
    } 
} 

media(max-width: 767px) 
{ 
    div#header_img 
    { 
     background-image: url('path/to/img.png'); // Alternative image, perhaps taller? 
    } 
} 

Тот же принцип может быть применен к текстовому размеру, а также. Есть читать о медиа запросов here и here

Вы также можете играть с background-size и попытаться сделать так, чтобы изображение остается один и тот же размер, но меньше его видно, как div это фон психотерапевтов ,