如何保留裁剪后的响应背景图像？

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; 
    } 
}