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行DELIMITER更改为max-width: 100%？它应该适合整个父width: 100%。您还可以为此案例创建特定的CSS类，例如

div

你的.fit-image{ width: 100%; } in ruby：

image_tag

Answer 2

你有：

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

您可能想尝试以下示例：

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

图像填写div（红宝石）？

2 个答案: