html - 裁剪图像的边以适应屏幕大小并居中对齐

Question

我有一张图片沿着我网站的宽度延伸。它包含在宽度设置为 100% 的 div 中。图片本身的宽度为 2560 像素。

我希望图像与浏览器 View 中的页面宽度相同，因为目前它会使页面变长。

简单地将图片的宽度设置为 100% 会使其变得更小且不成比例。

搜索表明可以通过将 max-width 设置为 100%，但这只会切断图像的末尾。

有没有办法保持中心对齐，即裁剪图像的两端，使其始终保持居中？

非常感谢。

Answer 1

你应该使用background-image来设置它。

这将使您可以像这样轻松地将其居中:

body{
background: url("path/to/image") no-repeat fixed center top; 
}

center - 图像居中

top - 垂直调整图像

no-repeat - 确保背景不重复

已修复 - 滚动时跟随

您可能不需要所有这些属性，您要找的就是中心。