html - 在浏览器窗口中左右移动图像

Question

在网页的中间，我想显示一张从浏览器窗口的左侧一直延伸到右侧的图像。

调整窗口大小时，图像应按比例缩小，但我需要图像的可见高度，比方说 200 像素，应该保持不变，因为图像上有一个显示文本的 div。我假设“图像窗口”由具有固定高度的包含 div 保留。

如何实现这一点并让它在以下浏览器中工作:ie8+、Chrome20+、FF20？

Answer 1

只需设置宽度，将高度留空，它会自动缩放

img {
    width: 100%;
}

如果您想要设置高度，您应该将图像包裹在一个 overflow hidden 的 div 中。它会根据你的需要缩放等等。

已编辑

演示 http://jsfiddle.net/vYdBt/136/

img {
    width:100%;
}
div {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

您链接中的网站使用了背景图片。可以这样做

演示 http://jsfiddle.net/kevinPHPkevin/vYdBt/135/

div {
    background: url(http://lionssharedigital.com/wp-content/uploads/2013/04/Lion.jpg);
    width: 100%;
    height: 300px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size:100% auto;
}

这也会使图像垂直居中