html - 横幅背景图像屏幕分辨率

Question

我正在创建一个网站，我的临时链接是:http://ryanterpilowski.co.uk/urofoam/

正如您在主横幅中看到的那样，我使用了背景图像，文本淡入。我很满意它在普通桌面屏幕上的外观……但在宽屏 (1600x1200) 向上查看时。 .背景图像被裁剪了你可以在这里看到例子:http://www.infobyip.com/testwebsiteresolution.php?url=http%3A%2F%2Fryanterpilowski.co.uk%2Furofoam%2F&width=1680&height=1050&in_browser=true .

我看不到在我的 CSS 中控制它的位置，有人可以帮忙吗？

Answer 1

这叫做 Responsive Web Development(RWD) .为了使页面响应所有设备，我们需要使用 RWD 的一些基本原理。

您可以使用 CSS3 Media queries您可以在其中定位不同的屏幕尺寸。

例如:

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

/* Styles inside this only work when your device width is between 320px to 480px. Same you can set for other sizes*/


}

有关更多详细信息，请查看此 answer

要使图像具有响应性，只需尝试:

img{ max-width: 100%;}

或

.your-class-name { 
  background: url(images/yourimage.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

请检查这个Large Background Images and Screen Sizes