Question

CSS如何控制一张宽图，在浏览器窗口变小的时候，隐藏左右两头，然后居中显示中间部位，保持高度不变？

CSS如何控制一张宽图，在浏览器窗口变小的时候，隐藏左右两头，然后居中显示中间部位，保持高度不变？
http://www.battlenet.com.cn/wow/zh/就想魔兽世界的这个背景一样。

Answer 1

如果不考虑IE9以下的浏览器，可以直接用CSS3 做。

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}

如果要支持IE8+，且不用CSS3的话，可以这么做，但是不支持opera浏览器

<div id="bg">
  <img src="images/bg.jpg" alt=""></div>

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;}#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;}

如果要IE 7以上的话，只能用Jquery了。
(function() {var win = $(window);win.resize(function() {
    
    var win_w = win.width(),
        win_h = win.height(),
        $bg    = $("#bg");

    // Load narrowest background image based on 
    // viewport width, but never load anything narrower 
    // that what's already loaded if anything.    var available = [
      1024, 1280, 1366,
      1400, 1680, 1920,
      2560, 3840, 4860
    ];

    var current = $bg.attr('src').match(/([0-9]+)/) ? RegExp.$1 : null;
    
    if (!current || ((current < win_w) && (current < available[available.length - 1]))) {
      
      var chosen = available[available.length - 1];
      
      for (var i=0; i<available.length; i++) {
        if (available[i] >= win_w) {
          chosen = available[i];
          break;
        }
      }
      
      // Set the new image      $bg.attr('src', '/img/bg/' + chosen + '.jpg');
      
      // for testing...      // console.log('Chosen background: ' + chosen);      
    }

    // Determine whether width or height should be 100%    if ((win_w / win_h) < ($bg.width() / $bg.height())) {
      $bg.css({height: '100%', width: 'auto'});
    } else {
      $bg.css({width: '100%', height: 'auto'});
    }
    
  }).resize();
  })(jQuery);

我们一般直接用第一个方法，不考虑IE9以下的全尺寸，在IE7 Ie8 写一些fall back 的style。 说真的，IE 真是讨厌

Answer 2

<div style="background: url(images/bg.jpg) no-repeat center top; width:100%; height:300px; margin:0px auto;"></div>