响应式设计 - 图像不适合视口大小高度答案

【问题标题】：Responsive Design - Images not fitting viewport size height wise响应式设计 - 图像不适合视口大小高度
【发布时间】：2014-12-08 11:50:48
【问题描述】：

您好，我是响应式设计的新手，我最近一直在开发一个投资组合网站，我一直在努力使其在 Mozilla 响应式设计开发人员视图工具中提供的所有给定尺寸下都具有响应性。

当我将视口缩小到更小的尺寸时，我的图像高度不再适合视口的高度，尤其是在视口大小为 320 像素时会出现这种情况。这是我的媒体查询的问题还是我的 HTML 结构的一般缺陷？还是CSS？这可能是我的图像大小的问题吗？这使我在网站其他方面的进展脱轨了，对此的任何帮助将不胜感激。

HTML

<!DOCTYPE html>
<html>

    <head>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <script type="text/javascript" src="typewriterscript.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body>
        <div id="wrapper">
            <header>
                <img src="Header2.png" />
            </header>
            <div id="main-content">
                <img src="Aboutme2.png" />
                <div id="about-me"></div>
            </div>
            <div class="push"></div>
        </div>
        <footer>
            <img src="Footer2.png" />
        </footer>
    </body>
    <!--<script LANGUAGE="javascript">
        startTyping(text, 50, "about-me");
    </script>-->

</html>

CSS

html, body {
    height: 100%;
    margin: 0;
    background-color: #2576bc;
}
#wrapper {
    width: 100%;
    min-height: 100%;
    margin: 0 auto -81px;
}
header {
    width: 800px;
    height: 244px;
    border: solid 4px black;
    margin: 0px auto;
}
#main-content {
    width: 800px;
    height: 500px;
    border: solid 4px black;
    margin: 0px auto;
}
/*#about-me {
    position: absolute;
    width: 436px;
    height: 200px;
    background-color: #2576bc;
    border: solid 3px black;
    margin: -450px 180px;
}*/
footer, .push {
    height: 81px;
}
footer {
    width: 800px;
    border: solid 4px black;
    margin: 0px auto;
}
header img {
    width:100%;
    height:auto;
}
footer img {
    width:100%;
    height: auto;
}
#main-content img {
    width:100%;
    height:auto;
}

媒体查询

/*Responsive CSS*/
 @media screen and (max-width:959px) {
    #wrapper {
        width: 100%;
    }
    header {
        width: 100%;
    }
    #main-content {
        width: 100%;
    }
    footer {
        width: 100%;
    }
    .push {
        width: 100%;
    }
}
@media screen and (max-width:640px) {
    #wrapper {
        width: 100%;
    }
    header {
        width: 100%;
    }
    #main-content {
        width: 100%;
    }
    footer {
        width: 100%;
    }
    .push {
        width: 100%;
    }
}
@media screen and (max-width:320px) {
    #wrapper {
        width: 320px;
    }
    footer {
        width: 320px;
    }
}

【问题讨论】：

“viewport”是指标题标签和“#main-content”div吗？如果是这种情况，那是因为您的固定高度分别为 244 像素和 500 像素，因此您在其中的图像的高度正在变化，但它们的包装器保持相同的高度。是这个意思吗？
我用“viewport”来指代设备屏幕的大小，但是你提到的问题和解决方案是否仍然适用？如果我从包装器中删除高度样式，您会如何建议解决此问题？
试试，img { 最大宽度：100%; height:auto }，实际上等等你的意思是图像确实适合包装吗？ ://
现在我不太确定你在问什么，但对于初学者来说，我只需将标题标签和#main-content 设置为 height: auto。
你想要什么？您是希望您的图像填充其容器的高度并切掉侧面，还是希望容器缩小以便您的图像可以在视口中保持全宽？

标签： html css responsive-design

【解决方案1】：

图像的行为是这样的，因为它们所包含的 DIV（和其他元素 - 页眉、页脚）具有设定的高度。由于图像设置为width: 100%，因此它们将始终以它们的宽度完全填充封闭的 DIV。但是，它们的高度设置为auto，这意味着它们将保持原来的纵横比。

如果您希望图像在高度和宽度方面都填充 DIV，请不要设置封闭元素的高度（这样 DIV 将根据需要在图像周围拉伸）。

【讨论】：

我可能遗漏了一些东西，但删除 height 属性不会导致图像填满包含 DIV 的整个高度。如果height没有显式设置，默认值为auto；因此 OP 对 height: auto; 的使用将是多余的。保持纵横比的重点是明确的，并且是 OP 面临的固有问题。
我说的是从图像周围的 DIV 中移除高度。这样他们将根据需要调整图像的高度..
好的，原来的答案在这一点上有点含糊，我看到你已经更新它更简洁了。谢谢。

【解决方案2】：

您的图片具有响应性。如果您尝试 IE、Moz 和 Chrome，您会发现它们在缩小窗口时的表现都略有不同。这种差异是硬编码的，我所知道的任何东西都无法改变。

但是，您可能会发现在 CSS 中将其放在首位是否无济于事：

*, *:before, *:after {
        box-sizing: border-box;
 }

【讨论】：

【解决方案3】：

试试这个。您应该在#wrapper 上使用 max-width，并且不要在 div 上设置手动高度。除非您想要某些屏幕尺寸的特殊样式，否则您不需要媒体查询。

html, body {
    height: 100%;
    margin: 0;
    background-color: #2576bc;
}
#wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}
header {
    border: solid 4px black;
    margin: 0;
}
#main-content {
    border: solid 4px black;
    margin: 0;
}
/*#about-me {
    position: absolute;
    width: 436px;
    height: 200px;
    background-color: #2576bc;
    border: solid 3px black;
    margin: -450px 180px;
}*/
footer {
    border: solid 4px black;
    margin: 0;
}
header img {
    width:100%;
}
footer img {
    width:100%;
}
#main-content img {
    width:100%;
}

<!DOCTYPE html>
<html>

    <head>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <script type="text/javascript" src="typewriterscript.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body>
        <div id="wrapper">
            <header>
                <img src="Header2.png" />
            </header>
            <div id="main-content">
                <img src="Aboutme2.png" />
                <div id="about-me"></div>
            </div>
            <div class="push"></div>
        </div>
        <footer>
            <img src="Footer2.png" />
        </footer>
    </body>
    <!--<script LANGUAGE="javascript">
        startTyping(text, 50, "about-me");
    </script>-->

</html>

【讨论】：