响应灵活的图像不起作用

Question

我正在尝试让我的网站响应。我在这个网站 (http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/) 上发现要使图像灵活，你必须使用 max-width: 100%.

我在我的网站 (http://riksblog.com/Marnik/index.html) 上为 #promo1img（第一张 iphone 图片）做了这件事，但如您所见，它没有正常工作。

我缺少哪些 css 样式？

Answer 1

将您的 section.first class 更改为以下内容：（第 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;
    }
}

响应灵活的图像不起作用

Responsive flexible images not working

html

css

image

responsive-design

flexibility