2

我在顶部有一个固定的导航栏和一个全宽背景跨越 span12 的容器。但由于背景图像的内容对于视觉提示的布局至关重要。无论窗口大小如何，我都希望始终显示整个图像。

这是构建图像或图像集以实现相同目的的最佳方法。

大显示器

在此处输入图像描述

中型显示器

在此处输入图像描述

小尺寸

在此处输入图像描述

我有一个将显示在图像右侧的表格。因此，让图像正常工作对我来说有点棘手。

链接：play.mink7.com/minkstock/

4

3 回答 3

3

如果我理解正确，您只想拥有图像可以达到的最大尺寸（或百分比）。<img>尝试使用这样的元素，而不是背景图像：

img{
   max-width: 100%; /* or any other value */
   height: auto;
}
于 2012-12-04T18:24:43.170 回答
1

您选择使用 css 设置背景图像有什么原因吗？

如果我将#landing-page-bg div 更改为

<div id="landing-page-bg" style="background-image: none; width: auto; text-align: center;">
    <img src="http://play.mink7.com/minkstock/images/landing_page_bg.jpg">
</div>

它会产生您想要的效果（减去您设置的一些红色背景）。

如果您想在图像上叠加项目，您可以使用相对 div 定位。

于 2012-12-04T18:21:13.677 回答
1

background: url(images/landing_page_bg.jpg) 77% 0 fixed no-repeat;为您的小型媒体查询做一些事情。

于 2012-12-04T18:24:59.030 回答