html - 响应式横幅图片

Question

我正在开发一个响应式网站，该网站具有横跨边到边的大型横幅图像。问题是无论屏幕大小如何，它都应该是静态高度。因此，当我将图像设置为 width:100% 时，它在全尺寸下看起来很棒，但是一旦我开始缩小屏幕，图像就会变得比它需要的宽度更短。我该如何设置才能使图像高度看起来永远不会改变，并且当屏幕尺寸小于图像尺寸时它会放大并裁剪边缘？

http://bit.ly/1qxmZir

HTML

<div id="hd-img">
    <img src="http://72.52.242.20/~camacoll/wp-content/uploads/2014/05/inner-hd.jpg"> 
</div>

CSS

#hd-img {
    max-height: 352px;
}

img {
    width: 100%;
    height: auto;
    left: 100%;
    margin-left: -200%;
    position: relative;
} 

Answer 1

您可以这样做的一种方法是 this .

/* CSS */

#hd-img {
    height: auto;
    overflow: hidden;
}

#hd-img img {
    /* Optional max width: 600px; */
    display: block;
    margin: 0 auto;
}