Question

我正在使用Dreamweaver CC 2015制作网站及其流畅的网格布局。我得到了我想要的设计但是当我调整浏览器大小以模拟平板电脑或智能手机时，图像不会保持在一起？

您可以在此页面上看到它：www.sverkel.dk

Answer 1

这是background-size的价值问题。您将其设置为100%，但您应将其设置为100% 100%。一旦你在样式表中修复它，图像将始终保持在一起，而不会在它们之间留下任何空隙。例如：

#midt {
  background-image: url(../billeder/bgmidt.jpg);
  background-repeat: no-repeat;
  height: 100%;
  background-size: 100% 100%;
}

为什么会发生这种情况？如果background-size只获得一个值，则将其解释为图像宽度的值，并将高度值设置为{{ 1}}。您需要指定两个值，以便设置宽度和高度（source）。

正如下面的评论中所解释的，这可能会导致圆形边框出现问题，因为图像被拉伸时效果不佳。

如果可以的话，转移到仅限CSS的解决方案（没有图像）可能是一个好主意，它将适应屏幕大小并始终保持比例。它还可以为您节省一些带宽，因为您将停止在图像中使用100KB。唯一的问题是，您可能需要做一些技巧才能使其在旧浏览器中运行（尽管您似乎不需要它，请参阅下面的JSFiddle）。

这样的事情（您还可以看到更深入的sample on this JSFiddle）：

＆＃13;

auto

＆＃13;

body {
    background: url(http://www.sverkel.dk/billeder/bg.jpg) center center;
}

.gridContainer {
    width:90%;
    max-width:1200px;
    border-radius:10px;
    box-shadow:0px 0px 16px rgba(0,0,0,0.8);
    margin:auto auto;
    text-align:center;
    background:#e5e5e5;    
}

.gridContainer #top {
    background: #b4b4b4; /* Old browsers */
    background: linear-gradient(to bottom, #b4b4b4 0%,#e5e5e5 100%); /* W3C */
    height:125px;
    border-radius:10px 10px 0px 0px;
}

.gridContainer #bund {
    background: #b4b4b4; /* Old browsers */
    background: linear-gradient(to bottom, #e5e5e5 0%,#b4b4b4 100%); /* W3C */
    height:125px;
    border-radius:0px 0px 10px 10px;
}

.gridContainer #menu {
    background: #cf5858; /* Old browsers */
    background: linear-gradient(to bottom, #cf5858 0%,#902727 100%); /* W3C */
    height:45px;
    line-height:45px;
    color:rgba(255,255,255,0.9);
    border-radius:10px;
    margin:16px;
}

＆＃13;

缩放到移动设备时，div背景图像分开

1 个答案: