次のようにdivを応答させる方法

Question

I want to make this responsive **私はhtmlとcssでこれを設計しました。このdivを反応的にしたいのです...どうすればいいですか？

私は、ブートストラップの列を使用してみましたが、それは

を仕事ともそれがどのように固定された高さの背景画像を持っている場合は、背景が応答させる方法を教えていません。

.im1 
 
{ 
 
    /*padding: 10px;*/ 
 
    /*margin-left: 60px;*/ 
 
    margin-top: 10px; 
 
    z-index: 1; 
 
    width: 250px; 
 
    height: 250px; 
 
    margin-right: -80px; 
 
} 
 

 
.background1 { 
 
    background: url("../car/car_web.jpg"); 
 
    /*border: 2px solid black;*/ 
 
    width:1380px; 
 
    height:350px; 
 
    background-repeat: no-repeat; 
 
    padding: 50px; 
 
    padding-top: 10px; 
 
    padding-left: 130px; 
 
    left: 0px; 
 
    /*position: absolute;*/ 
 
    /*top: 20px;*/ 
 
    margin-left: -155px; 
 
    
 
}

<section id="COMPARE" style="margin-left: 100px;"> 
 
    <div class="container"> 
 
    <div class="col-md-12 background1"> 
 
     <label class="ll"> 
 
     <center><small><strong>Car Comparison lorims info</strong></small> 
 
     <h3>Compare Cars</h3> 
 
     </center> 
 
     </label><br> 
 
      
 
<div class="im1 col-md-3" style="position:relative; margin-left:40px;"> 
 
       <img class="" src="car/1.jpg" width="200px;" height="120px;" style=" position:absolute; z-index=1; top:0px; left:80px;"> 
 
       <img src="icon/vs.png" width="55px" height="55px" style="position:absolute; top:30px; left:260px; z-index:3;"> 
 
       <img class="" src="car/2.jpg" width="200px;" height="120px;" style=" position:absolute; z-index=1; top:0px; left:300px;"> 
 
       <img src="icon/vs.png" width="55px" height="55px" style="position:absolute; top:30px; left:480px; z-index:3;"> 
 
       <img class="" src="car/3.jpg" width="200px;" height="120px;" style=" position:absolute; z-index=1; top:0px; left:520px;"> 
 
       <img src="icon/vs.png" width="55px" height="55px" style="position:absolute; top:30px; left:700px; z-index:3;"> 
 
       <img class="" src="car/4.jpg" width="200px;" height="120px;" style=" position:absolute; z-index=1; top:0px; left:740px;"> 
 
      </div> 
 
      
 
      
 
      <div class="col-md-12 de" id="compare"> 
 
      <button type="submit" class="btn btn-primary12 btn-lg outline1 " name="login">COMPARE CARS</button></span> 
 
      <br> 
 
      <br> 
 
      <small><strong>Or <a href="#">Click here for custom comparison</a></strong></small> 
 
      </div> 
 
    </div> 
 
    </div> 
 
</section>

Answer 1

それはあなたがそれがunfortuコード化されてきたかを見ずに問題を見ることは非常に困難ですあなたがコードをコピーして、あなたが物事をどのようにセットアップしたかを見ることができますか？

しかし、私はそれを行っていきます。

/* Standard size */ 
.carImage{ 
    width: 25%; 
} 

/* Tablet Size */ 
@media only screen and (max-width: 768px) { 
    .carImage{ 
     width: 50%; 
    } 
} 

/* Mobile Size */ 
@media only screen and (max-width: 480px) { 
    .carImage{ 
     width: 100%; 
    } 
} 

変更.carImage：私はこのような何か... 4台の車両は、ラッパーのdivに、あなたは窓が小さくなったときに車のイメージがお互いの下に落ちるしたいことをしていると仮定するつもりですあなたのコードを貼り付けない限り、正確な問題を伝えることはできません。これがコードをコピーするのに役立たないなら、私はもう一度やり直します。

EDIT：あなたが送信されたコードを見た後：

https://jsfiddle.net/o05yvL1h/3/

私はので、多分この非常に多くの場合、個人的にそれを使用しないでください、あなたはそれをやった方法でposition: absolute;を使用していないだろう助けにはならないかもしれませんが、おそらくそれはあなたがそれについてどうやって動くかの簡単な例です。私は例のためだけにイメージソースを変更しました、それが助けてくれるといいですね...

Answer 2

https://jsfiddle.net/o05yvL1h/
https://jsfiddle.net/o05yvL1h/2/

div { 
 
    display: inline-block; 
 
    width: 23%; 
 
    width: calc(25% - 1em); 
 
    margin: 1em .5em; 
 
    background: silver; 
 
    line-height: 4em; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
div + div:after { 
 
    content: "VS"; 
 
    line-height: 2em; 
 
    width: 2em; 
 
    margin: -1em; 
 
    position: absolute; 
 
    border-radius: 50%; 
 
    background: blue; 
 
    color: white; 
 
    top: 50%; 
 
    left: -.5em; 
 
} 
 

 
@media all and (max-width: 320px) { 
 
    div { 
 
    display: block; 
 
    width: auto; 
 
    } 
 
    
 
    div + div:after { 
 
    top: -.5em; 
 
    left: 50%; 
 
    } 
 
}

<div> 
 
    1 
 
</div><div> 
 
    2 
 
</div><div> 
 
    3 
 
</div><div> 
 
    4 
 
</div>