Question

我正在开发一个响应式网站，它有一个横跨边缘的大横幅图像。问题是，无论屏幕大小如何，它都应该是静态高度。因此，当我将图像设置为宽度：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;
}

Answer 2

试试这个：

background-image:url(../images/header-bannerbg.png);background-position:fixed;background-repeat:no-repeat;height:580px;-webkit-background-size: 100% 100%;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;background-size: 100% 100%;

响应的横幅图像

2 个答案: