Проблема с размером img на экране смартфона

Question

Я сделал небольшой сайт WordPress, и на экране смартфона мое изображение заголовка не отображается так, как мне бы хотелось.

Сайт здесь: здесь

Я пытался применить этот код к img div: margin: 0 auto; position: relative; width: 100%;

Теперь размер изображения отличныйно у меня есть серый блок, рядом с которым я не хочу ..

Вот что я получаю:

У кого-то есть идея?Спасибо

Answer 1

на экране мобильного телефона добавьте эти свойства:

.has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe, .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img { 
element.style {
    background-size: cover;
    position: relative;
    height: 75vh;
    width: 236vw;
}

Answer 2

просто добавьте одну строку в ваш код:

#wp-custom-header img {
    margin: 0 auto;
    position: relative;
    width: 100%;
    height: -webkit-fill-available;
}

Примечание: это растянет изображение в браузерах -webkit, следующим шагом будет центрирование вашего изображения, если вы хотите.

Приветствия

Answer 3

Попробуйте заменить это (около строки 1651):

.has-header-image.twentyseventeen-front-page .custom-header, .has-header-video.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header, .has-header-video.home.blog .custom-header {
    display: table;
    height: 75vh;
    width: 100%;
}

с этим:

.has-header-image.twentyseventeen-front-page .custom-header, .has-header-video.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header, .has-header-video.home.blog .custom-header {
    display: table;
    height: auto;
    width: 100%;
}