如何保持剪辑中的响应式背景图像？

Question

我有一个响应式背景图像here，它适用于大多数屏幕尺寸，但是，在iPad /平板电脑尺寸上，它会剪切风车叶片的边缘。

这是我用于空间的CSS：

background: url('/image/background-img.jpg') no-repeat; 
width: 100%;  
background-position: 0% 25%;
background-size: cover; 
background-position:center; 
background-repeat: no-repeat;

如何继续填充背景但不剪辑图像？

Answer 1

这是background-size:cover的预期行为。它显示的图像尽可能小，确保它覆盖所有元素并切断（裁剪）多余的元素。

您需要调整元素的min-height，直到您对结果满意为止。防止它被切断（太多）。为了防止它干扰不同屏幕上的外观，您可能希望在特定的@media查询中包含平板电脑的特殊规则。例如：

@media (max-width: 991px) and (orientation: landscape) {
    .jumbotron { 
        min-height: 62vw;
    }
}