html - 图片填入div(ruby)？

Question

这可能是一个简单的问题。

我有一个图像框/div，我希望它完全由图像填充，各种随机大小的图像都将适合该 div。

目前，它只是跟随 div 的高度，即 200px。但图像的宽度没有达到 div 的边缘。

如何使图像按比例扩展并适合 div？

提前致谢。

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

如何将 CSS 行 max-width: 100% 更改为 width: 100% ？它应该适合整个父 div。您还可以为这种情况创建一个特定的 CSS 类，例如

.fit-image{
  width: 100%;
}

还有你在 ruby​​ 中的 image_tag:

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