Question

您好我是响应式设计的新手，我最近在一个投资组合网站上工作，我一直在尝试使用Mozilla响应式设计开发人员视图工具中提供的所有给定大小的响应。

当我将视口缩小到较小的尺寸时，我的图像的高度不再适合视口的高度，这在视口大小为320px时尤为明显。这是我的媒体查询的问题还是我的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;
    }
}

Answer 1

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

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

Answer 2

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

＆＃13;

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%;
}

＆＃13;

<!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>

＆＃13;

Answer 3

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

但是，您可能会看到在CSS中首先放置它是否有帮助：

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

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

3 个答案: