javascript - 如何根据窗口大小剃掉部分图像

Question

我有一张图片，见下图:

http://bookyoursite.com/images/bysheaderpic.png

图片是一个页面横幅，页面标题从图片中间开始。

我目前拥有的是

#banner {
    background-image:url('/images/bysheaderpic.png');
    background-repeat:no-repeat;
    background-position:right bottom;
    height:191px;
    max-width:1080px;
    min-width:550px;
    width:80%;
}

发生的事情是，当调整窗口大小时，图像会从右边被削掉，并剪掉标题的第一部分。如果我使用

background-position:center bottom;

它平均切断两侧，导致 .com 被切断。

我需要缩小图像(在调整窗口大小时)，以便页面标题保持可见。为此，需要将背景“附加”到容器中间的 2/3 标记附近

我试过 background-attachment 和 background-position 属性都无济于事。有没有办法不使用 javascript 来做到这一点？

Answer 1

你可以尝试使用:

background-size: cover;

阅读more关于 MDN 中的 background-size 属性。

您也可以通过将图像 width 和 height 设置为 100% 并将其插入容器中来做到这一点。

HTML:

<div id="banner">
    <img src="http://bookyoursite.com/images/bysheaderpic.png" width="100%" height="100%">
</div>

CSS:

#banner {
    height:191px;
    max-width:1080px;
    min-width:550px;
    width:80%;
}