2つのサイドバイサイド幅幅の異なるタグ（40％/ 60％）は、100％の幅に縮小して最終的にスタックします。

Question

私は以下のことを試して失敗しました。

私はそれぞれにイメージを含む2つのdivタグを持っています。左側のDiv Aには768 x 400のネイティブサイズの画像が、右側のDiv Bには1152 x 400のサイズがあります。したがって、これらの画像は幅40％、幅60％を表します。

これは画面の全幅を占めていて、ポイント（40％と60％の位置に並んでいます）を一点まで縮尺させ、最終的には100％フルで重ねるようにしたいと考えています（たとえ720px幅以下の任意の解像度でも）幅があり、ネイティブのアスペクト比を尊重しています。したがって、Div Bの画像は実際にDiv Aよりも「短く」なります。

添付の画像でこれを説明しようとしました。

ご協力いただければ幸いです。

おかげで、このような

https://s13.postimg.org/qq94pfq3b/2_divs.png

Answer 1

何かが動作するはずです。これらの画像を重ね合わせるためのブレークポイントは767pxです。これは、モバイルCSSが開始されるべき標準解像度です。

HTML：

<div class="a"> 
    <img src="image1.png"> 
</div> 
<div class="b"> 
    <img src="image2.png"> 
</div> 

CSS：

.a, .b { float: left; } 
.a img, .b img { width: 100%; } 
.a { width: 40%; } 
.b { width: 60%; } 

@media screen and (max-width: 767px) { 
    .a, .b { width: 100%; } 
} 

編集：私はちょうどあなたのイメージが同じ比率を持っていないことに気づい

。あなたが書いたように彼らのネイティブレシオを尊重しながら、あなたがそれを想像したように、他のものより背が高いことなく、彼らがどのように並んでいると思いますか？

Answer 2

bootstrapとすることができます。ここであなたを助けることができる小型の抜粋です：

.a { 
 
    background-color: blue; 
 
    height: 100px; 
 
} 
 

 
.b { 
 
    background-color: red; 
 
    height: 100px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="a col-xs-12 col-sm-5"></div> 
 
<div class="b col-xs-12 col-sm-7"></div>