Как увеличить изображение на весь экран? - PullRequest
Новая
       31

Как увеличить изображение на весь экран?

0 голосов
/ 04 февраля 2019

Я только что настроил веб-сайт WordPress и хотел бы, чтобы изображение слайдера было установлено на полный экран.В настоящее время у меня установлены Slider Revolution и WPBakery Page Builder подключаемых модулей.

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

Мне бы хотелось, чтобы изображение показывалось в полноэкранном режиме, как этот, на этом сайте https://www.rentmycaravan.com/

Мой сайт www.hiremytent.com .

Спасибо.

Ответы [ 2 ]

0 голосов
/ 04 февраля 2019

Попробуйте: 

body{height:100%;
   width:100%;
   background-image:url(test-image-camping.jpg);/*your background image*/  
   background-repeat:no-repeat;/*we want to have one single image not a repeated one*/  
   background-size:cover;/*this sets the image to fullscreen covering the whole screen*/  
   /*css hack for ie*/     
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.test-image-camping.jpg',sizingMethod='scale');
   -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test-image-camping.jpg',sizingMethod='scale')";
}

Кроме того, вы также можете установить изображение для нижнего слоя: 

<img src='test-image-camping.jpg' style='position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:-1;'>
0 голосов
/ 04 февраля 2019

Вы можете сделать это с помощью css, как показано ниже.Просто обязательно замените «image.jpg» на фоновое изображение. 

body{height:100%;
   width:100%;
   background-image:url(image.jpg);/*your background image*/  
   background-repeat:no-repeat;/*we want to have one single image not a repeated one*/  
   background-size:cover;/*this sets the image to fullscreen covering the whole screen*/  
   /*css hack for ie*/     
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.image.jpg',sizingMethod='scale');
   -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg',sizingMethod='scale')";
}

Вы также можете сделать это с помощью некоторых плагинов jQuery:

...