与响应背景图像奋斗

问题描述：

我已经阅读了很多关于响应CSS背景图像的文章，但我无法让我的工作。与响应背景图像奋斗

我的网站是http://www.conn3cted.uk.tn/intManagement.html，我正在尝试将图片用作“横幅”，因此不能将高度设置得太大。

我似乎可以在桌面或移动设备上解决问题，但他们不想一起工作。我已经使用了建议的解决方案（下面），但是我没有把整个图片放大/缩小，它只显示了一部分或大量的空白区域。我究竟做错了什么！？

.whatWeDo { 
    padding-top: 100px; 
    background-image: url("/images/intManagement/homePage/whatwedo.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
    height: 120px; 
}

尝试使用'margin-top'而不是'padding-top' –

查看此li nk for responsive图片https://responsivedesign.is/resources/images/picture-fill –

答

试试这个CSS和使用媒体查询更改与容限顶部移动设备：

.whatWeDo { 
    background-image: url("/images/intManagement/homePage/whatwedo.jpg"); 
    background-repeat: no-repeat; 
    background-size: 100% auto; 
    height: 100vh; 
    margin-top: 80px; 
} 

@media screen and (max-width: 878px) { 
    .whatWeDo { 
     margin-top: 170px; 
    } 
}

啊，那更好！因为我可以使它与iPad一起工作！你能向我解释什么是'100vh'吗？在处理“高度”时，我只使用过'px'或'％'等 – OmisNomis

vh是一个视口单元，视口是浏览器呈现网站的区域。 VW：1 /第100次的视口宽度 VH：1 /第100次视口高度 VMIN：1 /第100次的最小侧的 VMAX：1 /第100次最大侧注：IE9使用代替VMIN VM。它不支持vmax。 – Sylvain

我想我需要做一些阅读 - 仍然困惑它是什么:) – OmisNomis

答

试试这个CSS替换为你的CSS：

这也只响应机顶盒按您需要：

.whatWeDo { 
    background-image: url("/images/intManagement/homePage/whatwedo.jpg"); 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
    float: left; 
    height: 100%; 
    padding-top: 100px; 
    position: relative; 
    top: 80px; 
    width: 100%; 
}

我稍微修改了一下（我删除了'padding-top'，因为它似乎并不需要，修改'height：'为' 30％“，因为它太大了。但是，感谢你，这是完美的！请你给我一个简单的解释，说明这是什么做的好吗？ – OmisNomis

因为你的“.navbar”类给位置：固定，那么我给这个位置：在这个类中的相对“.whatWeDo” – Jainam

与响应背景图像奋斗

相关推荐