以HTML/CSS顯示圖像？

-1

我正在開發一個項目，並且無法爲我需要的內容制定正確的代碼。我需要的是有兩個圖像填滿屏幕，但在屏幕的一半處彼此相對。所以基本上用戶會看到兩個圖像並排佔據整個屏幕。現在我的編碼經驗非常基礎，所以我理解語法等，但我可能會錯過某些詞彙。所以我對HTML/CSS很熟悉，但我不確定什麼是最好的方法。但我希望有人能解決我的問題！以HTML/CSS顯示圖像？

來源

2017-02-24 unowncoder

糊你的代碼 – amansoni211

歡迎來到SO。請看[遊覽]。您可能還想檢查[我可以詢問哪些主題]（http://stackoverflow.com/help/on-topic）和[問]，以及如何創建[mcve]。發佈您嘗試過的代碼以及收到的錯誤。儘可能具體，因爲它會導致更好的答案。 – happymacarts

這裏沒有人會給你完整的解決方案。人們準備好解決你在努力中遇到的錯誤/挑戰。不寫整個代碼，而不是你 – NDFA

這麼多問題需要回答，屏幕有多大？應該會是靜態的嗎？移動優化是你想要的東西？

我會推薦使用彈性盒。

<div class="flex-container"> 
    <img src="first-pic" alt="" title=""> 
    <img src="second-pic" alt="" title=""> 
</div>

CSS會是這樣的：

.flex-container{ 
     display: flex; 
     justify-content: center; 
    }

它應該幫助你ATLEAST開始;）

下一次嘗試做一些事情，這樣你就可以提高，而不是直接得到答案。

來源

2017-02-24 19:20:53

我不知道這是你正在尋找：如果要通過側面圖像方面，你可以浮動他們，給這樣的容器中各佔50％（我還包括一個100vh以適應高度，這部分是可選的）：

.screen { 
    width: 100%; 
} 

.image { 
    width: 50%; 
    float: left; 
    height: 100vh; 
} 

<div class="screen"> 
    <div> 
     <img src="http://placehold.it/350x150" class="image"> 
    </div> 
    <div> 
     <img src="http://placehold.it/350x150" class="image"> 
    </div> 
</div>

來源

2017-02-24 19:36:18 vladwoguer

哦，這工作！但是可以說每張照片的尺寸都比你的樣本大嗎？將它的任何截斷？ – unowncoder

同樣的行爲，如果圖像較大看[鏈接]（https://jsfiddle.net/vladwoguer/s8rjqhph/1/） – vladwoguer

下次在你的問題添加一些代碼。我希望這有助於:) – vladwoguer

這裏是一個反應的兩個背景圖片並排：

.area{ 
 
min-height: 100%; 
 
    display: flex; 
 
} 
 

 
.first-image{ 
 
background-color:gray; 
 
width:50%; 
 
} 
 

 
.second-image{ 
 
background-color:red; 
 
flex: 1; 
 
width:50%; 
 
} 
 
html, body { 
 
    height: 100%; 
 
}

<div class="area"> 
 

 
<div class="first-image"> 
 
</div> 
 

 
<div class="second-image"> 
 
</div> 
 

 
</div>

來源

2017-02-24 19:55:37 Nadim

這是爲了顏色，但如果我們要使用實際圖像？我擔心的是，由於沒有足夠的屏幕空間，圖像是否會被切斷 – unowncoder

以HTML/CSS顯示圖像？

回答

相關問題