響應DIV和背景

這是第一次，我做了一些迴應div的，現在我已經作出了響應的背景，我想我的內容是這樣的：響應DIV和背景

enter image description here

但它看起來像這樣：

enter image description here

如果有人可以幫助我，這將是巨大的。這裏是我的代碼，你看到我在做什麼

HTML：

<div class="container"> 
    <div class="leftColumn"><img src="projekt.png" width="400" height="400"></div> 
    <div class="rightColumn"><img src="projekt2.png" width="400" height="400"></div> 
</div>

CSS：

.container {width:100%;} 

.leftColumn {width:50%; float:left;} 
.rightColumn {width:50%; float:left;} 

@media(max-width:400px) 
{ 
.leftColumn { width:100px; float:none; display:block; position:relative; background-color:red; } 

.rightColumn { width:100px; float:none; display:block; position:relative; background-color:blue; } 

}

圖像是400×400像素和背景圖像是1920×1080

來源

2014-03-31 LV_

以供將來參考，不使用代碼周圍的網址標記。他們是鏈接，而不是代碼。標記爲代碼時，我們無法點擊它們。此外，如果您要鏈接JSFiddle，則需要在帖子中包含代碼。向我們展示您已經嘗試過的代碼。 – TylerH

我不明白你需要什麼基於你的小提琴......它是假設是正確的時候超過400px和你的問題是當時小於400px？這是你想要的東西的http：//jsfiddle.net/XmqNy/233/ –

是和它需要在屏幕的中心不是在左側或中心頂部必須是在屏幕的中心.. –

對於背景，請使用background-size屬性（CSS3）。

.container {width:100%;} 

.leftColumn {width:50%; float:left;} 
.rightColumn {width:50%; float:left;} 

@media(max-width:400px) 
{ 
    .container { 
     width: 400px; 
     height: 400px; 
     background: url(http://www.extremedialer.com/wp-content/uploads/2013/10/bg-1.jpg); 
     background-size: 400px; 
    }  
    .leftColumn { width:100px; float:none; display:block; position:relative; background-color:red; } 
    .rightColumn { width:100px; float:none; display:block; position:relative; background-color:blue; } 
} 
@media (min-width:401px) and (max-width:800px) 
{ 
    .container { 
     width: 800px; 
     height: 800px; 
     background: url(http://www.extremedialer.com/wp-content/uploads/2013/10/bg-1.jpg); 
     background-size: 800px; 
    }  
    .leftColumn { width:200px; height:200px; float:left; margin: 20px; display:block; position:relative; background-color:red; } 
    .rightColumn { width:200px; height:200px; float:left; margin: 20px; display:block; position:relative; background-color:blue; } 
}

http://jsfiddle.net/XmqNy/235/

來源

2014-03-31 13:52:55

肯定的，但現在我想的是2周的div中心Verticaly，你知道該怎麼做 –

像這樣：？？http://jsfiddle.net/7uDe8/ –

這是它現在看起來我.stack.imgur.com/xfG7pl.png，這是我希望它看起來i.stack.imgur.com/jJ7tgl.png –

嘗試在你的CSS文件：

@media(max-width:400px) 
{ 
    .leftColumn { width:100px; position:relative; background-color:red; } 

    .rightColumn { width:100px; position:relative; background-color:blue; } 

}

你不需要寫顯示：無。

來源

2014-03-31 13:41:01 Luiggi

都能跟得上還是一樣:( –

響應DIV和背景

回答

相關問題