2016-08-18 16 views
0

私はデスクトップとモバイルで動作するために縦横に反応するオーバーレイ画像を持っています。縦横に反応する画像

編集:縦に反応すると、画面内に留まる必要があり、画面の下にオーバーフローしないようにする必要があります。

画像の上に同じ場所に留まる必要のある要素があり、画像には縦横比が保持されている必要があります。

私はむしろ純粋なCSSでこれをやっていますが、JSとブラウザの互換性や簡単な解決策をとることができます。

http://codepen.io/brooksroche/pen/mEgJmd?editors=1100

<div class="container"> 
    <div class="img-container"> 
    <img src="http://placehold.it/300X200"> 
    <div class="example"></div> 
    </div> 
</div> 

.container { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
} 

.img-container { 
    position: relative; 
    margin: 0 auto; 
    border: 1px solid red; 
    width: 300px; 
    max-width: 100%; 
} 

.img-container img { 
    display: block; 
    max-width: 100%; 
    max-height: 100%; 
} 

.example { 
    position: absolute; 
    border: 1px solid blue; 
    top: 40%; 
    left: 30%; 
    width: 38%; 
    height: 20%; 
} 
+0

は、あなたが「サイズを変更しますが、縦横比を維持する」のような何かを見ているのですか? http://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratioこれは問題ですか? –

答えて

0

autoに幅と高さを設定してみてください:

.img-container img { 
display: block; 
width: auto; 
height: auto; 
} 

それとも私は、働いている他の自動車、幅または高さを設定しています。

+0

それはそれがウィンドウ内に垂直に収まるようにしていません –

+0

私はちょうど@ mehdi-dehghaniのcodepenと遊びました - それはあなたが 'display:flex; '.img-container'か 'align-items:flex-start'を追加してください。これがオプションかどうかは分かりません。 – waynejames

0

CSSメディアクエリを確認してください。

max-widthおよびmax-height CSS属性は、カバーしたい画面サイズに適切なブレークポイントを選択すると、問題を解決できるはずです。

チェックアウトthis Stack Overflow post

0

更新

私はちょうどcodepen &が、あまりにもここにコードをパット更新。ここで

<div class="container"> 
    <div class="img-container"> 
     <img src="http://placehold.it/500X300"> 
     <div class="example"></div> 
    </div> 
</div> 

.container { 
    border: 1px solid red; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-justify-content: space-around; 
    justify-content: space-around; 
    -webkit-flex-wrap: wrap; 
    flex-wrap: wrap; 
} 

.img-container { 
    position: relative; 
    overflow: hidden;  
    display: flex;  
} 

.img-container img { 
    display: block; 
    max-width: 100%; 
    margin: auto; 
} 

.example { 
    border: 1px solid blue; 
    height: 20%; 
    position: absolute;  
    width: 100%; 
    top: 50%; 
    transform: translateY(-50%);  
} 

作業codepen

+0

これは垂直に反応せず、同じ場所に留まるためにオーバーレイが必要です。 –

+0

@BrooksRoche私の答えを再チェックしてください。また、 'codepen'リンク –

関連する問題