Блог

Главная - Вопросы по программированию - Как установить изображение моего заголовка как 100% моего порта просмотра с помощью css и vh

Как установить изображение моего заголовка как 100% моего порта просмотра с помощью css и vh

#html #css #wordpress #responsive-design #elementor

#HTML #css #wordpress #адаптивный дизайн #элементарный

Вопрос:

Я использую WordPress с Elementor (тема Hello),

что я пытаюсь сделать: установить изображение моего заголовка как 100% от моего порта просмотра с помощью VH unit.

как я хочу, чтобы это выглядело — https://ibb.co/0MQv2dZ. мои результаты не работают. чего мне не хватает? (проверьте мой веб-сайт)

ссылка:https://wordpress-288516-1301271.cloudwaysapps.com/example //

Спасибо!

Ответ №1:

Хорошо, итак, вы спрашиваете об этом:

  • HTML
 <div class="full-screen-img">
   <img src="https://wordpress-288516-1301271.cloudwaysapps.com/wp-content/uploads/2020/09/Lirz-Cover.jpg" alt="image">
</div>
  • CSS
 .full-screen-img {
   height: 100vh;
   width: 100%;
}

Но если вы хотите, чтобы это выглядело как пример, есть несколько вещей, которые следует учитывать

  • HTML
 <div class="full-img-container">
   <img class="full-img" src="https://wordpress-288516-1301271.cloudwaysapps.com/wp-content/uploads/2020/09/Lirz-Cover.jpg" alt="image">
</div>
<div>
  other content
</div>
  • CSS
 .full-img-container{
    margin: auto;
    height: 40em;
    /*
     *image height will scale automatically base on the width
     * so you can make it resposive easylly with the column classes
     * available in bootstrap for example or adding media queires to change
     * width % base on viewport current with
     */
    width: 50%; 
}

.full-img {
 max-height: 100%;
 width: 100%;
}

Ответ №2:

Спасибо. да — теперь изображение составляет 100 ВЧ от порта просмотра. но теперь, когда я сжимаю окно, оно не реагирует, качество ниже. как я могу сохранить то же качество?

 body{
    margin:0;
    padding:0;
}

.full-img-container {
   height: 100vh;
   width: 100%;
}

.full-img {
 max-height: 100%;
 width: 100%;
}  
 <html>
<head>
</head>

<body>

<div class="full-img-container">
    <img  class="full-img" src="https://wordpress-288516-1301271.cloudwaysapps.com/wp-content/uploads/2020/09/Lirz-Cover.jpg" alt="image">
 </div>
 
</body>
 </html>