複数の解像度で適切に表示するイメージを取得する

Question

これはスタイリングですが、リアクションですが、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> 

ヘルプを評価してください。私は解決するために@解像度を使用することを含むと思う！

乾杯！ここを編集

は、他のスタイル

は、ブートストラップを使用してみてくださいコメントに私は定評がありませんCOMMENT AS

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

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

Answer 1

TREAT THISをしている、それがメディアオブジェクトとのCSSクラス、ありありすべてのプラットフォームと解決策に対応しています。