html - 响应式灵活图像不起作用

Question

我正在尝试使我的网站具有响应性。我在这个网站（http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/）上发现，为了使图像灵活，你必须使用最大宽度： 100%。

我在我的网站 ( http://riksblog.com/Marnik/index.html ) 上为#promo1img（第一张 iphone 图片）所做的，但正如您所看到的，它没有按应有的方式工作。

我错过了哪些 CSS 样式？

Answer 1

将您的课程更改section.first为以下内容：（第 110 行，在 stijl css 文件中）：

  padding: 0;
  margin: 0;
  position: relative;
  width: 100%;
  height: auto;
  color: white;
  text-align: center;
  background-image: url(../img/header.jpg);
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;

上面的代码修复了背景封面图像。

现在 html 中还有其他元素没有响应。因此，对于那些，将此代码添加到您的 css 中：

@media screen and (max-width: 480px){
    #contactemailp{
        margin-left:0px;
    }
    section.first .section-content .section-content-inner h1 {
        font-size: 40px;
    }
}