当我缩小窗口时，标题不会重新调整大小

【问题标题】：Header not re-sizing when I make the window smaller当我缩小窗口时，标题不会重新调整大小
【发布时间】：2013-12-03 09:48:18
【问题描述】：

我的标题是图片，所以我不能使用百分比。它必须具有固定的宽度和高度。这样，当我调整窗口大小并使其更小时，页面的内容会适合正确的大小，但标题保持不变（当然）因此，它会溢出页面的边界并在底部添加一个滚动条.

我可以剪切或裁剪页眉，使其高度始终固定，宽度自动与固定高度对应，但页眉溢出页面边框的溢出被隐藏了吗？

我可以使用

body {
overflow-x:hidden;
}

但我认为那是作弊。有什么想法吗？

谢谢！

【问题讨论】：

这很好。您还可以在高度或宽度上使用百分比，并且您的图像应保持其纵横比 - 只要您不同时这样做

标签： css

【解决方案1】：

我认为这就是您所追求的...使您的标题成为适合 100% 宽度 x 您需要的任何高度的 div。然后将该 div 设置为具有背景图像和 overflow: hidden;。这将始终调整大小以适应您的页面宽度，没有滚动条。

div{
    display: block;
    position: relative;
    width: 100%;
    height: 200px; /* Set your height here */
    overflow: hidden;
    background: url(http://www.f-covers.com/cover/beach-fun-vintage-photography-facebook-cover-timeline-banner-for-fb.jpg) no-repeat center center;
}

这会使背景图像尺寸保持在原始尺寸。但是，如果您希望图像拉伸以适合 div，请将其添加到 css；

-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;

这是一个有效的小提琴：http://jsfiddle.net/AWMQ6/

享受吧！

【讨论】：

太棒了！谢谢！
别担心迈克尔 :)