Question

这是我试过的，虽然没有意义：

<div style="background-position: -50%; width: 100%; background-image: url('/assets/upload/stab/1/taccos.png'); background-repeat: no-repeat; background-size: 100% auto; height: 885px; width: 792px;">
sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />
</div>

我想要以下内容：

|        IMAGE CENTERED         |
|    IMAGE CENTERED     |
|  IMAGE CENTERED   |
| IMAGE CENTERED |
|IMAGE CENTERED|
|MAGE CENTERE|
|AGE CENTER|
|GE CENTE|

随着屏幕变粗，图像应该被剪裁，而不是调整大小，其内容应该垂直居中

Answer 1

摆脱背景大小，使用background-position：center，摆脱div宽度;如果有固定的Div，屏幕宽度不会影响它，那么如何剪裁图像？

<div style="background-position: center; width: 100%; background-image: url('http://t1.gstatic.com/images?q=tbn:ANd9GcSJYVbh_I1DDoLLOxTwZPy0LPNxkZJvp1LmRydhdVcO2WifcnKN'); background-repeat: no-repeat; height:183px;">
sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />sdfsf<br />

Answer 2

我在这里更新了你的JSFiddle： http://jsfiddle.net/R82a4/3/

background-position: center;
width: 100%;
background-image: url('http://t1.gstatic.com/images?q=tbn:ANd9GcSJYVbh_I1DDoLLOxTwZPy0LPNxkZJvp1LmRydhdVcO2WifcnKN');
background-repeat: no-repeat;

屏幕截图：http://i.stack.imgur.com/nSZqk.png

背景图象剪报

2 个答案: