イメージを別のイメージの中心に置いて、それをモバイルランドスケープに対応させるにはどうすればいいですか？

-1

私は、別の画像を中心に再生する必要があります。私はパーセンテージを使用して、すべてのデバイスで動作させようとしていますが、パーセンテージは必要なように動作していません。モバイルサイトのスクリーンショットをポートレートとランドスケープで撮影しました。ここで見つけることができます。http://imgur.com/a/gN53f イメージを別のイメージの中心に置いて、それをモバイルランドスケープに対応させるにはどうすればいいですか？

デスクトップデバイスのサイトは、小さなデバイスには全く異なる行があります。以下のコードはモバイルサイトにのみ表示されます。

.parent { 
    position: relative; 
    top: 0; 
    left: 0; 
} 
.image1 { 
    position: relative; 
    top: 0; 
    left: 0; 
    z-index: 1; 
} 
.image2 { 
    position: absolute; 
    top: 30%; 
    left: 43%; 
    z-index: 2; 
}

並べ替えの作業：

は、ここでCSSのです。 HTML：応答性について

<div class="parent"> 
<img class="image1" src="https://placehold.it/1"/ alt="1"> 
<img class="image2" src="https://placehold.it/2"/ alt="2"> 
</div>

出典

2017-04-01 Adam Barker

私は、あなたの.image1クラスブロック要素を作った画像を中心としtransformプロパティを使用して中央に

.parent { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.image1 { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    display: block; 
 
    z-index: 1; 
 
} 
 
.image2 { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -moz-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    cursor: pointer; 
 
    z-index: 2; 
 
}

<div class="container"> 
 
    <div class="parent"> 
 
    <img class="image1" src="http://kingofwallpapers.com/image/image-025.jpg" alt="1" /> 
 
    <img class="image2" src="https://cdn1.iconfinder.com/data/icons/material-audio-video/20/play-circle-outline-128.png" alt="2" /> 
 
    </div> 
 
</div>

を画像2をもたらしました

出典

2017-04-01 11:14:33

-1

、使用のメディアクエリ "画像2用

セット幅は、例えば、50％

は今、左の設定：25％

出典

2017-04-01 10:47:59 Mehdi

あなたがしました.image1を相対に設定しますが、これは.image1の子ではないため、.image2には影響しません。また、画像にどのようなサイズがあるかは不明です。

第二の画像は、常にそれが位置だ保ち、最初の1とダウンスケールアップし、必要がある場合は、それはそうのように行うことができる：

.parent { 
    margin: 0 auto; 
    max-width: 960px; /* i. e. never exceed 960px in width = max-width of .image1 */ 
    position: relative; 
} 

.image1 { 
    display: block; 
    width: 100%; 
} 

.image2 { 
    left: 25%; 
    position: absolute; 
    top: 25%; 
    width: 50%; 
}

.image2は/ .image1の高さの25％の距離を持っているでしょう上、左、右の幅。画像の

出典

2017-04-01 10:52:51 Mary

変更サイズを証明するためには、適切

は、私はあなたの最初の画像は、親コンテナのサイズを決定

.parent { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    width: 300px; 
 
} 
 
.image1 { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 1; 
 
} 
 
.image2 { 
 
    position: absolute; 
 
    top: 32%; 
 
    left: 32%; 
 
    z-index: 2; 
 
    border: 1px solid; 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t 
 
\t </head> 
 
    <body> 
 
    <div class="parent"> 
 
     <img class="image1" src="https://placehold.it/300x300"/ alt="1"> 
 
     <img class="image2" src="https://placehold.it/100x100"/ alt="2"> 
 
    </div> 
 
    </body> 
 
</html>

出典

2017-04-01 10:52:57 Phantom

絶対位置に親のdivの幅を与えました私のコードでは、固定サイズのdivを使用しています。画像を表示するには：ブロック）

.parent { 
 
    position: relative; 
 
    border: 2px solid gray; 
 
} 
 

 
.child-1 { 
 
    height:300px; 
 
    width: 300px; 
 
    background: lightgreen; 
 
    margin: 0 auto; 
 
} 
 

 
.child-2 { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    background: salmon; 
 
    height: 50px; 
 
    width: 50px; 
 
}

<div class="parent"> 
 
    <div class="child-1"></div> 
 
    <div class="child-2"></div> 
 
</div>

出典

2017-04-01 11:06:08 kwiat1990

イメージを別のイメージの中心に置いて、それをモバイルランドスケープに対応させるにはどうすればいいですか？

答えて

関連する問題