Css 响应性设计-如何让我的图像在左侧占据整个屏幕

我正在使用媒体查询，并试图了解更多关于响应式设计的信息

媒体查询css

@media screen 
  and (max-width: 480px){ 
    #header .left {
        float:none;
        width:100%;
        height: 100%;
    }
        #header .left img{
            margin:0%;
            width:100%;
            height:auto;
        }

    #header .right {
        float:none;
        width:100%;
        height:100%;
        clear:both;
    }

  }

我的常规css看起来像：

    #header .left{
        width:17.95833335%;
        float:left;
    }
        #header .left img{
            margin:0%;
            max-width:100%;
            max-height:100%;
            -moz-border-radius:5px 20px 5px; -webkit-border-radius:5px 20px 5px; border-radius:5px 20px 5px;
        }

#header .right{
        width:79.95833335%;
        max-height:100%;
        min-height:100%;
        margin:0% 1%;
        /*background-color: red;*/
        background:
            linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
            linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
            linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
            linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
            linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
            linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
            background-color: #131313;
            background-size: 20px 20px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        float:right;
    }

html

<div class="left">
                    <img src="{{ url_for('static', filename='my_pic.jpg') }}" alt="My Pic" />
                </div><!--left-->
                <div class="right">
                    <h2>
                        Test test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</h2>
</div><!--right-->

测试测试测试测试测试

我现在看到：

我希望右侧的黑色区域（

.right

）向下移动，左侧的图像（

.left

）占据整个屏幕

我怎样才能做到这一点

---

谢谢

您可以在图像

宽度：100%

和

清除：两者都可以

使黑色文本框位于图像下方。 如果你能提供html，那会很有帮助

--编辑--

---

正如我用

width:100%

和

clear所说的那样：左边的课程中给出的这两个
都会为你做好准备。
你的
#标题。左边的img
规则包含
最大宽度：100%
，但是对于你想要的东西，它必须是
宽度：100%
（和
高度：auto
）
粘贴HTML代码并创建一个JSFIDLE来复制该漏洞。谢谢你，添加了该漏洞，但它并没有使图像显示在整个屏幕上……更新css以显示。还更新了图像tooDo左右需要的宽度：100%；高度：自动？在您的css中，规则的顺序是您在此处列出的顺序，还是（应该是）相反的顺序（常规样式之后的媒体查询）？媒体查询是一个单独的css文件。首先加载常规css，然后加载媒体查询文件，并使用媒体声明从左右规则中标出
高度：100%
——这没有真正意义，可能会导致问题。另外，我会在不使用flex参数的情况下尝试它（在
的媒体查询中放入
flex:none
。right
）。
#header
有什么CSS？不幸的是，添加了这个，左侧的图像增加了一点，但没有完全。。。更新上面的css以向您展示。还有什么想法吗？我对JSFIDLE和你的代码做了一些研究，效果很好，图像总是在上面，文本在下面，你能给我们url吗，这样我们就可以看到实时应用的css规则了？