Question

我一直在寻找灵感，我已经离开了HTML游戏多年了。我决定开展一个项目，重新回归过去。我看到很多网站现在都有全宽标题图像，看起来非常令人印象深刻。我看到的主要是它们对视口的宽度作出反应。

我有一张图片（约为5000x1300像素）。我知道对于我正在使用它的东西可能有点极端，但这就是我给出的形象。我需要的是一个全宽标题，专注于该图像的特定部分，隐藏溢出，但如果视口更大，将显示更多的图像。

到目前为止我尝试过的方式，浏览器尝试将5000px宽度的100％压缩到视口中，这使得图像看起来变形和压扁。

有一个简单的方法吗？

Answer 1

可能针对你想要用百分比关注的位。

HTML：

<header></header>

CSS：

header {
    background: url('your image') 20% 20% no-repeat;
    height: 100px; /* ? */
}

使用background-size缩放图像;恩。 background-size: 960px 600px;