背景仅与视口一样宽 [英] Background is only as wide as view-port

问题描述

烦人的问题！

当我放大视口窗口(在Firefox，chrome中会发生这种情况)然后向右水平滚动时，背景图像将被剪切

When I zoom-in on my view-port window (happens in Firefox, chrome) and then scroll horizontally to the right, my background images are clipped

这些图像最能描绘出正在发生的事情:

the images best depicts what's happening:

放大

-图像仅与视口一样宽

- image is only as wide as view-port

缩放方式-不会出现问题

以下是我的CSS中可能与您相关的部分:

Here are some sections from my css which might be relevant:

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body{ width: 100%; }
header#header { width: 100%; }
header#header #background-image {
  height: 150px;
  background: url(/images/header/silhouette.png) repeat-x;
} 

在没有应用cssgradients的情况下也会发生这种情况-确实在这里很困难

This happens with and without cssgradients applied too - really stumped here

推荐答案

此问题的解决方法是在主体上设置最小宽度:

The fix for this is to set min-width on the body:

body{ width:100%;min-width: 1002px; }

这可以解决我和iphone都具有的所有浏览器上的问题(根据 iphonetester ，尽管我意识到这可能是最好的立即添加一些媒体查询，以真正为手持设备用户提供最佳解决方案

This fixes problem on all browsers that I have as well as iphone (according to iphonetester although I realise it's probably best to add some media queries now to really give the best solution to handheld users

这篇关于背景仅与视口一样宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！