html - 在平板电脑 View 上图像裁切/消失

我正在努力使我的网站具有响应能力。现在，文本是可响应的，但是我的图像在平板电脑视图上已被部分截断，并在移动设备上的文本描述框后面消失了。任何帮助都会很棒。以下是我的代码以及我的网站在平板电脑视图中的外观。

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>

最佳答案

您需要添加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>