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

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约background-size酒店在MDN。

此外，您可以通过使图像100％width和height并将其插入您的容器内。

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%; 
} 

Answer 2

你有没有考虑一个CSS maskand一些宽度和最大宽度与百分比

类似：

-webkit- mask-image：url（image.jpg）;