我正致力于让我的网站做出回应。现在文本是响应性的,但我的图像在平板电脑视图上被部分截止,并在移动设备上的文本描述框后面消失。任何帮助都会很棒。以下是我的代码以及我的网站如何查看平板电脑视图。
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>
答案 0 :(得分:0)
您需要添加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%;
}
}
&#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;