将图像的边裁剪为屏幕大小并居中对齐 [英] Crop sides of image to size of screen and center align it

问题描述

我有一个沿着网站宽度延伸的图片.它包含在div中，宽度设置为100％.图片本身的宽度为2560px.

I have an image which runs along the width of my site. It is contained in a div with width set to 100%. The image itself is 2560px in width.

我希望图像与浏览器视图中的页面宽度相同，因为当前它使页面更长.

I would like the image to be the same width as the page in the browser view, as currently it makes the page longer.

将图像的宽度简单地设置为100％具有缩小和不相称的效果.

Simply setting the width of the image to 100% has the effect of making it smaller and disproportionate.

搜索表明，可以通过将max-width设置为100％来实现，但这只会剪切图像的末尾.

Searching suggests it may be possible by setting the max-width to 100%, but this only cuts the end of the image off.

是否有一种方法可以保持中心对齐，即裁剪图像的两端，使其始终保持居中?

Is there a way to maintain the center alignment, i.e. to crop both ends of the image so that it always remained centered?

非常感谢.

推荐答案

您应使用background-image进行设置.

这将使您可以轻松地将其居中，如下所示:

This will allow you to center it easily like so:

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

center-使图像居中

top-垂直调整图像

no-repeat-确保背景不重复

fixed-滚动时跟随

您可能不需要所有这些属性，而您要寻找的是中心.

You may not want all these properties, the one you are looking for is the center.

这篇关于将图像的边裁剪为屏幕大小并居中对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！