CSS 和 Boostrap：在 div 中拟合图像或轮播

Question

I have got a series of divs inside Bootstrap grid , as these are generated dynamically it could be of any number.

Each of these div contains:

• Image or Carousel
• Couple of words (fit in single line, always)
• Radio buttons, these also fit in the single line.

The dimension all the divs are as follows:

width: 230px;
height: 270px;

I am facing a problem with Image/Carousel placement inside the div . I'm specifying the size of Image/Carousel to be 180px by 180px .

But, somehow image is taking all the width of the div ie image rendering with the width of 230px, while the image's height is 180px only. See below how it is appearing.

The desired output : The Image/Carousel should be rendered 180*180 only. So that I can have some empty space each side.

EXISTING CODE:

CSS

        .nop_img {
            width:180px;
            height:180px;
        }
        .row{
            overflow: hidden; 
        }
        .nop_div {
            overflow: hidden;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 50% 50%;
            width: 230px;
            height: 270px;
        }

HTML CODE:

<div class="container-fluid">
            <div class="row">
                {% for track_id, image_path in image_urls.items %}
                {% if image_path|length == 1 %}
                <div id="nopCarousel_{{ track_id }}"  class="column nop_div">
                    {% for ip in image_path %}
                    <img class="d-block w-100 nop_img" src="{{ ip }}" >
                    {% endfor %}
                    <p>{{ image_path|length }} Face</p>
                    <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1_{{track_id}}" value="option1" checked>
                            <label class="form-check-label" for="exampleRadios1">
                                act1
                            </label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2_{{track_id}}" value="option2">
                            <label class="form-check-label" for="exampleRadios2">
                                act2
                            </label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3_{{track_id}}" value="option2">
                            <label class="form-check-label" for="exampleRadios2">
                                act3
                            </label>
                        </div>
                </div>
                {% else %}
                <div id="nopCarousel_{{ track_id }}" class="carousel slide column nop_div" data-ride="carousel">
                    <!-- <div id="nopCarousel_{{ track_id }}" class="carousel slide column nop_div" data-ride=False data-interval=500> -->
                        <div class="carousel-inner">
                            {% for ip in image_path %}
                            <!-- <h1> Index: {{ forloop.counter }}</h1> -->
                            {% if forloop.counter == 1 %}
                            <div class="carousel-item active">
                                <img class="d-block w-100 nop_img" src="{{ ip }}" >
                            </div>
                            {% endif %}
                            <div class="carousel-item">
                                <img class="d-block w-100 nop_img" src="{{ ip }}" >
                            </div>
                            {% endfor %}
                        </div>
                        <a class="carousel-control-prev" href="#nopCarousel_{{ track_id }}" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#nopCarousel_{{ track_id }}" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                        <p>{{ image_path|length }} Faces</p>
                        <!-- Radio button -- Can give dropdown too -->
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1_{{track_id}}" value="option1" checked>
                            <label class="form-check-label" for="exampleRadios1">
                                act1
                            </label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2_{{track_id}}" value="option2">
                            <label class="form-check-label" for="exampleRadios2">
                                act2
                            </label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3_{{track_id}}" value="option2">
                            <label class="form-check-label" for="exampleRadios2">
                                act3
                            </label>
                        </div>
                    </div>

                    {% endif %}
                    {% endfor %}
                </div>
            </div>

Answer 1

Set your image rules to include max-width:180px; and width:100%;

More information if interested: https://blog.prototypr.io/what-even-is-the-difference-between-width-and-max-width-8f37b282c7f1