Question

我正在使用Ionic和Angular来构建移动应用程序。我现在正在使用具有背景的Ionics sidemenu：

.menu.menu-left {
    background-image: url('../img/menu_background.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

应用程序可以在不同的屏幕尺寸上运行，从平板电脑到平板电脑再到台式机，因此我需要提供不同的图像尺寸。

我是否必须为每个显示尺寸提供图像，或者我可以在启动时以某种方式调整背景图像的大小并将调整后的版本设置为背景？

Answer 1

您可以尝试使用@media css在每个视图中显示不同的图像。例如：

@media screen and (max-width: 1199px) {
   .menu.menu-left {
     background-image: url('../img/menu_background.jpg');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: 50%;
     background-attachment: fixed;
   }
}

@media screen and (max-width: 767px) {
   .menu.menu-left {
     background-image: url('../img/menu_background_2.jpg');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: 50%;
     background-attachment: fixed;
   }
}

或者你可以正确设置你的css为背景：

  .menu.menu-left {
     background-image: url('../img/menu_background.jpg');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: 50%;
     background-attachment: fixed;
   }

离子侧菜单有背景。缩放背景？

1 个答案: