Question

我使用以下代码调整图像大小...基本上，当屏幕尺寸缩小或变宽时，我会更换图像。我想知道这是否是正确的方法，我必须为媒体查询中的每个断点使用什么尺寸的图像？

以下是我的背景图片CSS代码片段。顺便说一下......我正在使用＆＃34; no-gutters＆＃34;在bootstrap 4中布局网站。但是当图像变小时，它们只显示部分背景。我想创建一个新图像（调整大小）或缩小以显示正确的背景。

有关调整图像大小或缩小/扩展图像尺寸的任何想法？默认的起始图像是2000x1333px。

＆＃13;

.landpage-img {
  background: url(../img/bg-neon-01-2000x1333.jpg) no-repeat center center fixed;
  height: 1333px;
}

@media only screen and (max-width: 1024px) and (orientation:landscape) {
  .landpage-img {
    background: url(../img/bg-neon-01-2000x1333.jpg) 50% 0 no-repeat center center fixed !important;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .landpage-img {
    background: url('../img/bg-neon-01-2000x1333.jpg') 50% 80% no-repeat fixed !important;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
  .landpage-img {
    background: url('../img/bg-neon-01-2000x1333.jpg') 50% 80% no-repeat fixed !important;
    background-size: auto !important;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}

＆＃13;

使用媒体查询和引导程序调整响应式移动Web设计的背景图像4

0 个答案: