Bild in div (Rubin) ausfüllen?

Question

könnte es einfache Frage sein.

ich habe eine image-box/div, die ich will, dass sie vollständig von bild ausgefüllt wird, alle art zufällige größen von bildern werden in div passen.

im Moment folgt es nur der Höhe des div, das 200px ist. aber die Breite des Bildes erreicht nicht die Kante des Div.

Wie kann ich Bild proportional zu erweitern und passen in das div?

danke im voraus.

the tour box, the image div is on left part of the tour box

<section class="tours"> 
<div class="container"> 

    <% @tours.each do | tour |%> 
    <div class="tours-box"> 
     <div class="row"> 

      <!-- Image --> 
      <div class="col-xs-12 col-sm-3 col-md-3 tours-image-box"> 

        <%= image_tag tour.tourimage.url()%> 

      </div> 

      <!-- Description --> 
      <div class="col-xs-12 col-sm-6 col-md-6 tours-description-box "> 
       <div class="box-inner"> 
        <div class="tours-description"> 

        <h4><span><%= image_tag tour.tour_category.icon.url(:thumb) %></span><%= tour.title %></h4> 
        <p><%= tour.text %></p> 

        <div class="tours-indicator"> 
         <h6>Capacity: <%= "#{remain_capacity(tour)}" %>/<%=tour.capacity%> remaining</h6> 
        </div> 
       </div> 
       </div> 
      </div> 

      <!-- Price --> 
      <div class="col-xs-12 col-sm-3 col-md-3"> 
       <div class="box-inner"> 
        <div class="tours-price"> 
         <ul> 
          <li><h6>RM <span class="price-value"><%= tour.price_for_adult %></span><span class="price-type"> /adult</span></h6></li> 
          <li><h6>RM <span class="price-value"><%= tour.price_for_child %></span><span class="price-type"> /child</span></h6></li> 
          <li><a href="#" class="button-text date">Check Date</a></li> 
         </ul> 
         <% tour_id = "tour-id-#{tour.id}" %> 
         <button class="btn button button-outline" type="button" data-toggle="collapse" data-target="#<%= tour_id %>" aria-expanded="false" aria-controls="<%= tour_id %>">View More</button> 
        </div> 
       </div> 
      </div> 

     </div> 
    </div> 

    <div class="collapse" id="<%= tour_id %>"> 
     <div class="tours-more"> 
      <div class="row"> 

       <!-- Star Time & Duration --> 
       <div class="col-md-3"> 
        <div class="more-box"> 
         <div class="more-details"> 
          <div class="row"> 
           <div class="col-md-6"> 
            <h6>Start Time:</h6> 
           </div> 
           <div class="col-md-6"> 
            <p><%= tour.try(:start_time).try(:strftime,"%H:%M %P") %></p> 
           </div> 
          </div> 
         </div> 
         <div class="more-details"> 
         <div class="row"> 
          <div class="col-md-6"> 
           <h6>Duration:</h6> 
          </div> 
          <div class="col-md-6"> 
           <p><%= tour.duration %></p> 
          </div> 
         </div> 
          </div> 
        </div> 

       </div> 

      <!-- Activities & Location -->  
      <div class="col-md-3"> 
       <div class="more-box"> 
        <div class="more-details"> 
        <div class="row"> 
         <div class="col-md-4"> 
          <h6>Activity:</h6> 
         </div> 
         <div class="col-md-8"> 
          <p><span class="activities-icon"><%= image_tag tour.tour_category.icon.url(:thumb) %></span><%= tour.tour_category %></p> 
         </div> 
        </div> 
         </div> 
        <div class="more-details"> 
        <div class="row"> 
         <div class="col-md-4"> 
          <h6>Location:</h6> 
         </div> 
         <div class="col-md-8"> 
          <p><%= tour.location %></p> 
         </div> 
        </div> 
         </div> 

       </div> 
      </div> 

      <!-- Notes --> 
      <div class="col-md-3"> 
       <div class="more-box"> 
         <h6>Notes:</h6> 
         <p><%= tour.notes %></p> 
       </div> 
      </div> 

      <!-- Decision -->  
      <div class="col-md-3"> 
       <div class="more-box"> 
        <div class="tours-decision"> 
        <a href="#" class="favourite button-text">Favourite This</a> 
        <!-- 
        <ul> 
         <li class="subtext">Share This</li> 
         <li><span><%= image_tag("host-detail-airport.png", alt: "Airport") %></span>on FacebooK</li> 
         <li><span><%= image_tag("host-detail-airport.png", alt: "Airport") %></span>on Twitter</li> 

        </ul> 
        --> 
        <div class="share"> 
         <%= render 'layouts/socialshare' %> 
        </div> 
        <button type="button" class="btn button button-wide">Book This</button> 
         </div> 
      </div> 
      </div> 

     </div> 
    </div> 
     </div> 
    <% end %> 

</div> 

css

.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%; 
      } 


    } 

Answer 1

Sie haben:

<%= image_tag tour.tourimage.url()%> 

Sie können das folgende Beispiel, um zu versuchen:

<%= image_tag 'example.jpg', class: 'img-responsive center-block' %> 

Answer 2

Wie wäre es, die CSS-Zeile max-width: 100% zu width: 100% zu ändern? Es sollte das gesamte Elternteil div passen. Sie können auch eine bestimmte CSS-Klasse für diesen Fall, wie

.fit-image{ 
    width: 100%; 
} 

Und Ihre image_tag in Ruby erstellen:

<%= image_tag(tour.tour_category.icon.url(:thumb), class: 'fit-image') %>