讓圖像在多個分辨率下正確顯示

這是造型，它在React中，但我認爲CSS解決方案會很好。讓圖像在多個分辨率下正確顯示

var ontop = { 
      position: 'absolute', 
      display: 'block', 
      height:'auto', 
      width: '50%', 
      margin: 'auto', 
      marginTop: '-50%', 
     };

基本上如果分辨率降低，它確實不適用這種樣式。這是另一張圖片上的圖片。我基本上試圖複製這個網站http://www.milkbardigital.com.au/。

這是html（它實際上是jsx，但並不重要）。

  <div style={heroStyle}> 
       <Image 
        style={background} responsive 
        src="http://www.milkbardigital.com.au/wp-content/uploads/2015/11/Milkbar-Home-Background.jpg"> 
       </Image> 
        <Image 
         style={ontop} responsive 
         src="http://www.milkbardigital.com.au/wp-content/uploads/2015/11/Milkbar-Digital-Media.png"> 
        </Image> 
      </div>

欣賞幫助。我認爲它涉及使用@resolution來修復！

乾杯伴侶！

編輯

下面是其他樣式

var background = { 
      backgroundSize : 'cover', 
      width: '100%', 
     }; 

var heroStyle = { 
      width:'auto', 
      overflow : 'hidden', 
     };

來源

2017-07-12 Michael Holborn

你可以給你的'英雄風格'和'背景'風格也 –

_「如果分辨率降低，它真的不起作用」_。爲什麼？具體是什麼問題？ –

基本上圖像會覆蓋其他圖像 –

將此視爲評論我沒有信譽COMMENT

嘗試使用引導程序，它具有CSS類與媒體對象，是充分響應每個平臺和解決方案。

來源

2017-07-12 09:29:39 artiom

是的，它不起作用，因爲圖像越過另一個 - 它使用react-bootstrap –

讓圖像在多個分辨率下正確顯示

回答

相關問題