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

Question

[Aeshira]

всем здрасьте.
Один товарищ-гитарист попросил меня сделать ему сайтик визитку(за бутылку условного пива с наклейкой колы). Я решил на главной через секции сделать ссылки на части экрана, в которых сидят картинки(Jpg), внутри самих картинок я так же разместил картинки-ссылки(типа лого ютуба со ссылкой на его канал, лого вк со ссылкой на его группу вк). В процессе я столкнулся с проблемой: при изменении разрешения экрана с относительно стандартного 1920-1080 на 1600-900 - у меня картинки блоки начинают скакать и сливаться/обрезать друг друга. Первым делом решил все это исправить через правило media - но что-то пошло не так и лого просто улетели нензамо куда. Попробовал через min-height:60vh, max-height:75vh - но стало только хуже(видимо я ошибся при задании самого вью поинта).
Конкретно мне(может в силу врожденной тупости) поиск по форуму ничем не помог.

Для наглядности выложил сей стремный недоделок (при изменении масштаба сайта через ctrl+колесо видна проблема)

https://maxgerasimovich.000webhostapp.com/index.htm
помогите народ.=) Моих знаний уровня бегиннер уже точно не хватает.

Answer 1

[FeST1VaL]

1. Не используйте фиксированую высоту
2. Зачем у section width: 20vw?
3. Зачем вам пустые блоки homeTitleStripe
4. Очень много ошибок в консоли
5. Если не хватает знаний, то сделайте заказ на фрилансим.

Answer 2

[Aeshira]

1. Не используйте фиксированую высоту
Даже если не использовать - то все равно блок подстраивается под размеры картинки. Чисто интереса ради создал правило для pointer и задал его картинки - эффект тот же, только мейн картинка стала кликабельной.
2. Зачем у section width: 20vw?
что бы растягивать верхнее меню.
3. Зачем вам пустые блоки homeTitleStripe
В будущем - что бы в них добавить ссылки. Сейчас, что бы занимать простанство для верхнего меню.
4. Очень много ошибок в консоли
Это ерунда. они все ссылаются на jquery для карусели. Ибо сначала я хотел сделать окно-карусель, на котором были бы все ссылки в отдельных фрагментах. Товарищ такую идею не оценил. А так как это еще не готовый вариант, то и чистить код от скриптиов, которые не функционируют на большинстве фри хостингах - как-то не хочется. Да и вряд ли проблема в этом.
5. Если не хватает знаний, то сделайте заказ на фрилансим.
Обычно, когда не хватает знаний, человек стремится чему-то научиться. Так же и я хочу методом проб и ошибок познать дзен.