Divのサイズを変更する方法とアスペクト比を維持する方法

Question

divのサイズは、1170px x 929pxの背景イメージを持ちます。幅を縮小すると、それを縮小するので、アスペクト比が維持されるように高さも縮小したいと思います。誰かがCSSを使ってこれをどうやって行うことができるのか説明できますか？私が持っているすべては、これまでの任意のヘルプは素晴らしいのおかげだろう、次の

<section class="box"> 
      <article class="container "> 
       <div class="content margin_tp_80 margin_bm_40 map_london"> 
       </div> 
      </article> 
     </section> 

です。

Answer 1

ブートストラップには、あなたのために行うクラスがあります。

<img class="d-block img-fluid" src="https://healthintelasia.com/wp-content/uploads/2013/09/asia-1500-X-600-banner.jpg" alt="First slide"> 

Answer 2

これは、あなたが探しているものかもしれない、幅と高さは常に同じ比率を保つ

.box{ 
 
    position: relative; 
 
\t width: 100%; //width of your background image 
 
    } 
 
.box:before{ 
 
    content: ""; 
 
\t display: block; 
 
\t padding-top: 79.4%; //the ration (929/1170)*100 
 
    } 
 
    .container { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t bottom: 0; 
 
\t right: 0; 
 
\t background-color: #f1f1f1; 
 
}

<section class="box"> 
 
     <article class="container">  
 
      <div class="content margin_tp_80 margin_bm_40 map_london"> 
 
      </div> 
 
     </article> 
 
</section>