css - Wordpress - 屏幕完全缩放

Question

我正在为我建立一个网站。我安装了 MetaSlider 插件。我希望摄影能够在整个屏幕上缩放(无需滚动屏幕)。理想情况下，“第一屏”还应该显示菜单栏(底部)。如何做到这一点？

<?php 
    echo do_shortcode("[metaslider id=62 percentwidth=100]"); 
?>

Answer 1

为您的菜单设置 50 像素的高度(或您喜欢的任何高度)，然后将此高度添加到您的 slider 图像中:

.sticky_header {height: 50px}

.metaslider .slides img {
  height: calc(100vh - 50px); /* The height of the viewport - the height of your menu */
}

理想情况下，您应该将图像添加到 slider :object-fit: cover;，这样就不会扭曲图像。

.metaslider .slides img {
   height: calc(100vh - 50px); 
   object-fit: cover;
}