html - 响应式设计图像不缩放

Question

我本月在我的网络标准设计课程中学习 HTML/CSS，本周我们正在修复我们的网站以使其具有响应性。

我已将所有 px 转换为百分比，并将所有字体从 px 转换为 em。我在我的画廊里把 max-width: 100% 搞砸了。

我将发布我的链接而不是所有代码。

http://jgoldd.github.io/wsd/index.html

Answer 1

你的CSS太有问题了。所以，让我向你解释一个简单的技术来激活对图像的响应行为

在 HTML 中尝试此代码

<img class="resize" src="http://jgoldd.github.io/wsd/images/mountains1.jpg">

CSS

.resize {
    max-width: 100%;
    height: auto;
    width: auto;
}

此代码简单地激活图像上的响应行为。

如果您有任何疑问，请告诉我...！:)

Answer 2

从你的身体标签上取下宽度和边距。创建一个称为包装器的类并将其添加到您的容器中，例如

.wrapper{
   max-width:960px;
   margin:0 auto;
   width:100%;
}

<header>
     <div class="wrapper">
         // put your content in here
     </div>
</header>

<div id="content">
    <div class="wrapper">
        // put your content in here
    </div>
</div>

<footer>
     <div class="wrapper">
         // put your content in here
     </div>
</footer>

如果你不想这样做，你可以将你的身体设置为

body{
  max-width:960px;
  width:100%;
}

但是我会将您的结构更改为使用包装器的方式，这有助于从一开始就练习干净的代码卫生:-)

Answer 3

您将需要稍微玩一下，但这里有一个快速的帮助您朝着正确的方向前进。（删除我用 REMOVE 评论的行）

#gallery li{
     width: 49%;
     display: inline-block;
     .display: inline;  /* for IE 8 */
     zoom: 1; /* for IE 8 */
     /* float: left; REMOVE */
}

#gallery img {
    width: 100%;
    /* max-width: 100%; REMOVE */
}

#gallery_container{
    width: 100%;
    /* width: 41.666667%;  REMOVE */
}

试试看。应该给你更好的结果，并希望你能到达你想去的地方。