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

时间:2017-12-29 05:24:03

标签: html css responsive-design

我正致力于让我的网站做出回应。现在文本是响应性的,但我的图像在平板电脑视图上被部分截止,并在移动设备上的文本描述框后面消失。任何帮助都会很棒。以下是我的代码以及我的网站如何查看平板电脑视图。 looks at tablet 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>

1 个答案:

答案 0 :(得分:0)

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

&#13;
&#13;
.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%;
    }
} 
&#13;
<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>
&#13;
&#13;
&#13;