title: Image fill in div (ruby)?
body: <p>it might be simple question.</p>
  
  <p>i have a image-box/div that i want it to be fill in completely by image, all kind random sizes of images will be fit in the div.</p>
  
  <p>at the moment, it just follow the height of the div, which is 200px. but the width of the image is not reaching the edge of the div.</p>
  
  <p>how do i make image to expand proportionally and fit inside the div?</p>
  
  <p>thank you in advance.</p>
  
  <p><a href="https://i.stack.imgur.com/rlLHm.png" rel="nofollow noreferrer">the tour box, the image div is on left part of the tour box</a></p>
  
  <pre><code>&lt;section class="tours"&gt;
  &lt;div class="container"&gt;
  
      &lt;% @tours.each do | tour |%&gt;
      &lt;div class="tours-box"&gt;
          &lt;div class="row"&gt;
  
              &lt;!-- Image --&gt;
              &lt;div class="col-xs-12 col-sm-3 col-md-3 tours-image-box"&gt;
  
                      &lt;%= image_tag tour.tourimage.url ()%&gt;
  
              &lt;/div&gt;
  
              &lt;!-- Description --&gt;
              &lt;div class="col-xs-12 col-sm-6 col-md-6 tours-description-box "&gt;
                  &lt;div class="box-inner"&gt;
                      &lt;div class="tours-description"&gt;
  
                      &lt;h4&gt;&lt;span&gt;&lt;%= image_tag tour.tour_category.icon.url(:thumb) %&gt;&lt;/span&gt;&lt;%= tour.title %&gt;&lt;/h4&gt;
                      &lt;p&gt;&lt;%= tour.text %&gt;&lt;/p&gt;
  
                      &lt;div class="tours-indicator"&gt;
                          &lt;h6&gt;Capacity: &lt;%= "#{remain_capacity(tour)}" %&gt; / &lt;%=tour.capacity%&gt; remaining&lt;/h6&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;!-- Price --&gt; 
              &lt;div class="col-xs-12 col-sm-3 col-md-3"&gt;
                  &lt;div class="box-inner"&gt;
                      &lt;div class="tours-price"&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;h6&gt;RM &lt;span class="price-value"&gt;&lt;%= tour.price_for_adult %&gt;&lt;/span&gt;&lt;span class="price-type"&gt; /adult&lt;/span&gt;&lt;/h6&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;h6&gt;RM &lt;span class="price-value"&gt;&lt;%= tour.price_for_child %&gt;&lt;/span&gt;&lt;span class="price-type"&gt; /child&lt;/span&gt;&lt;/h6&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#" class="button-text date"&gt;Check Date&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;% tour_id = "tour-id-#{tour.id}" %&gt;
                          &lt;button class="btn button button-outline" type="button" data-toggle="collapse" data-target="#&lt;%= tour_id %&gt;" aria-expanded="false" aria-controls="&lt;%= tour_id %&gt;"&gt;View More&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="collapse" id="&lt;%= tour_id %&gt;"&gt;
          &lt;div class="tours-more"&gt;
              &lt;div class="row"&gt;
  
                  &lt;!-- Star Time &amp; Duration --&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;div class="more-box"&gt;
                          &lt;div class="more-details"&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-md-6"&gt;
                                      &lt;h6&gt;Start Time:&lt;/h6&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-md-6"&gt;
                                      &lt;p&gt;&lt;%= tour.try(:start_time).try(:strftime,"%H:%M %P") %&gt;&lt;/p&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="more-details"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-md-6"&gt;
                                  &lt;h6&gt;Duration:&lt;/h6&gt;
                              &lt;/div&gt;
                              &lt;div class="col-md-6"&gt;
                                  &lt;p&gt;&lt;%= tour.duration %&gt;&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                              &lt;/div&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
              &lt;!-- Activities &amp; Location --&gt;    
              &lt;div class="col-md-3"&gt;
                  &lt;div class="more-box"&gt;
                      &lt;div class="more-details"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-4"&gt;
                              &lt;h6&gt;Activity:&lt;/h6&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-8"&gt;
                              &lt;p&gt;&lt;span class="activities-icon"&gt;&lt;%= image_tag tour.tour_category.icon.url(:thumb) %&gt;&lt;/span&gt;&lt;%= tour.tour_category %&gt;&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;div class="more-details"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-4"&gt;
                              &lt;h6&gt;Location:&lt;/h6&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-8"&gt;
                              &lt;p&gt;&lt;%= tour.location %&gt;&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                          &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;!-- Notes --&gt;
              &lt;div class="col-md-3"&gt;
                  &lt;div class="more-box"&gt;
                          &lt;h6&gt;Notes:&lt;/h6&gt;
                          &lt;p&gt;&lt;%= tour.notes %&gt;&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;!-- Decision --&gt;    
              &lt;div class="col-md-3"&gt;
                  &lt;div class="more-box"&gt;
                      &lt;div class="tours-decision"&gt;
                      &lt;a href="#" class="favourite button-text"&gt;Favourite This&lt;/a&gt;
                      &lt;!--
                      &lt;ul&gt;
                          &lt;li class="subtext"&gt;Share This&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;&lt;%= image_tag("host-detail-airport.png", alt: "Airport") %&gt;&lt;/span&gt;on FacebooK&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;&lt;%= image_tag("host-detail-airport.png", alt: "Airport") %&gt;&lt;/span&gt;on Twitter&lt;/li&gt;
  
                      &lt;/ul&gt;
                      --&gt;
                      &lt;div class="share"&gt;
                          &lt;%= render 'layouts/socialshare' %&gt;
                      &lt;/div&gt;
                      &lt;button type="button" class="btn button button-wide"&gt;Book This&lt;/button&gt;
                          &lt;/div&gt;
              &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
          &lt;/div&gt;
      &lt;% end %&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>css </p>
  
  <pre><code>.tours {
  background-color: $halfwhite;
  padding: 32px 0px;
  .tours-box {
      min-height: 200px;
      background-color: white;
      border: 2px solid $bluedark;
      margin-top: 20px;
  
      .box-inner {
          border-left: 2px solid $bluedark;
          min-height: 200px;
      }
  
      .tours-image-box {
          padding-right: 0px;
  
  
              img {
                  position: relative;
                  object-fit: cover;
                  top: 0;
                  bottom: 0;
                  right: 0;
                  left: 0;
                  margin: auto;
                  height: 200px;
                  max-width: 100%;
              }
  
  
      }
  </code></pre>