全幅画像の相対的位置付け

Question

私は背景画像が1500x1062で、100vw widthとauto heightです。

ここでは、上部に正確に306px、右側に852pxと置く必要がある画像を上部に配置する必要があります。しかし、他の画像はウィンドウ幅の100％なので、画像は変化するアスペクト比で拡大縮小する必要があります。

私の頭が痛いし、これを達成する方法がわかりません。

Answer 1

pxを2番目の画像のvw/vhに変換しようとしましたか？ 1つの要素がpxにあり、もう1つの要素がビューポートで変化するアスペクト比でうまく機能しません。

Answer 2

私は、ブラウザの幅に基づいて要素の位置の上端と幅を設定することが重要だと思うのは、画像の幅を決めるブラウザの幅であり、縦横比は ' Tへの変化は、それはまた、画像の高さを決定します：

.background { 
 
    width: 100vw; 
 
    background-image: url('http://digital-photography-school.com/wp-content/uploads/flickr/5661878892_15fba42846_o.jpg'); 
 
    background-size: 100vw; 
 
    height: 800px; 
 
    position: relative; 
 
} 
 

 
.inner { 
 
    position: absolute; 
 
    left: 25vw; 
 
    top: 40vw; 
 
    width: 1vw; 
 
    height: 1vw; 
 
    background: red; 
 
}

<div class="background"> 
 
    <div class="inner"> 
 
    
 
    </div> 
 
</div>

簡単にサイズ変更のためのフィドル：1500のうちhttps://jsfiddle.net/pdn2trju/1/

Answer 3

306を20.4％です。小さい画像にleft:20.4%を割り当ててみてください。また、小さい画像の元の幅は何も言わなかったので、その幅に対して相対的な割合を割り当ててください。