Question

处理图像的最佳方法是什么，在覆盖背景方面，高度比宽度大得多？

我所拥有的图像是1026x2258（宽x高）并且可以显示HORRIBLY。

是否有任何技巧可以解决这种情况？用图像可以完成更多的裁剪。

理想情况下，它应该适合高度约为1700-1800px的div容器，但是在宽度上它必须操纵得太多，以至于你几乎看不到图像。

Answer 1

我倾向于使用background-size: cover和background-position: center

这样你可以看到图像的中间

Answer 2

我建议您使用各种图像尺寸，安排可能需要更多工作，但加载速度更快，可以通过CSS进行调整。

尝试类似：

@media(max-width:2250px){
  .image{background-image: url('../images/2258x1026.jpg')}
}
@media(max-width:1920px){
  .image{background-image: url('../images/1920x1080.jpg')}
}
/*@media(max-width:1920px){ <- width of screen
  .image{background-image: url('../images/1920x1080.jpg')} <- image for this screen
}*/

当图像宽度远小于其高度

2 个答案: