響應式設計 - 如何讓我的圖像左側佔用整個屏幕

我正在使用媒體查詢，並試圖瞭解有關響應式設計的更多信息。響應式設計 - 如何讓我的圖像左側佔用整個屏幕

媒體查詢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）的圖像佔據整個屏幕。

我該如何做到這一點？

感謝

來源

2015-12-07 CodeTalk

粘貼HTML代碼和創建的jsfiddle再現錯誤。 – Senthe

您#header .left img規則包含max-width: 100%，但你想要的東西它必須是width: 100%（和height: auto）

來源

2015-12-07 22:15:42 Johannes

謝謝你，補充說，但它沒有使整個屏幕的圖像...更新CSS顯示。同時更新圖片 – CodeTalk

'clear：both'必須進入'.right'規則。 – Johannes

左右需要寬度：100％; height：auto; ？ – CodeTalk

你可以在圖像width:100%和clear:both給使黑色文本框圖像下面去了。如果你可以提供的HTML可能會有所幫助。

- 編輯 -

當我同一個width:100%和clear:both在左邊給定的類將使對你的工作說。

來源

2015-12-07 22:14:24 eskeli

現在添加html – CodeTalk

不幸的是，增加了這個，左邊的圖像增加了一點，但並不完全......更新上面的CSS來展示給你。還有什麼想法？ – CodeTalk

我用jsfiddle和你的代碼玩過一段時間，它運行良好，圖像總是在頂部，文本在它下面，你可以給我們的網址，所以我們可以看到實時應用的CSS規則？ – eskeli

響應式設計 - 如何讓我的圖像左側佔用整個屏幕

回答

相關問題