我有一张图片,见下图:
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 来做到这一点?
最佳答案
你可以尝试使用:
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%;
}
关于javascript - 如何根据窗口大小剃掉部分图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19778023/