平板电脑视图上的图像截止/消失

Question

我正在努力使我的网站响应。现在文本是响应性的，但我的图像在平板电脑视图上被部分截止，并在移动设备上的文本描述框后面消失。任何帮助都会很棒。以下是我的代码以及我的网站如何查看平板电脑视图。

CSS

.work {
    -webkit-padding-start: 0;
    list-style-type: none !important;
    padding: 4vw;
    margin: 0 auto;
    background-color: #f7f7f7;
}

.UMMA {
    background-image: url(../img/UMMA.jpg);
}

@media only screen and (max-width: 720px) {
.UMMA {
        background-position-x: 30%;
    }
} 

<li class="section UMMA”>
    <div class="description">
        <h2>UMMA</h2>
        <p>Making the on-site museum experience more engaging for visitors.</p>
        <a class="button" target="_blank" href=“UMMA.html”>View Project</a>

    </div>
</li>

Answer 1

你需要添加background-size:100%;

.work {
    -webkit-padding-start: 0;
    list-style-type: none !important;
    padding: 4vw;
    margin: 0 auto;
    background-color: #f7f7f7;
}

.UMMA {
    background-image: url(https://www.w3schools.com/w3css/img_fjords.jpg);/*Image use for example*/
    background-repeat: no-repeat;
    background-size: 100%;
}

@media only screen and (max-width: 720px) {
.UMMA {
        background-position-x: 30%;
    }
} 

<li class="section UMMA">
    <div class="description">
      <h2>UMMA</h2>
      <p>Making the on-site museum experience more engaging for visitors.</p>
      <a class="button" target="_blank" href=“UMMA.html”>View Project</a>

    </div>
  </li>