Question

我的标题是图片，因此我无法使用百分比。它必须具有固定的宽度和高度。与此同时，当我调整窗口大小并使其缩小时，页面内容适合正确的大小，但标题保持不变（当然），因此，它溢出页面的边框并在底部添加滚动条

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

我可以用

body {
overflow-x:hidden;
}

但我填补了这个作弊行为。任何想法？

谢谢！

Answer 1

我认为这就是你所追求的......让你的标题成为适合100％宽度x的div，无论你需要多少高度。然后将该div设置为具有背景图像并溢出：隐藏; 。这将始终调整大小以适应您的页面宽度，没有滚动条。

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/

享受！

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

1 个答案: