我有一个响应式背景图片 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;
如何继续填充背景而不裁剪图像?
最佳答案
这是 background-size:cover
的预期行为。它显示尽可能小的图像,确保它覆盖所有元素并剪掉(裁剪)多余的部分。
您需要调整元素的min-height
,直到您对结果感到满意为止。为了防止它被削减(太多)。为了防止它干扰它在不同屏幕上的外观,您可能需要将平板电脑的特殊规则包装在特定的 @media
查询中。示例:
@media (max-width: 991px) and (orientation: landscape) {
.jumbotron {
min-height: 62vw;
}
}
关于css - 如何防止响应式背景图像被剪切?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34668202/