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

问题描述

我有一系列divsinside Bootstrap grid，因为它们是动态生成的，它可以是任意数量。

其中每一个都div包含：

图片或轮播
几个词（总是适合单行）
单选按钮，这些也适合单行。

尺寸divs如下：

width: 230px;
height: 270px;

我在div. 我将 Image/Carousel 的大小指定为180px by 180px.

但是，不知何故，图像占用了divie 图像渲染的所有宽度，宽度为 230px，而图像的高度仅为 180px。请看下面它是如何出现的。

所需的输出：图像/轮播应仅呈现 180*180。这样我就可以在每一侧都有一些空白空间。

现有代码：

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 代码：

<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>

标签： htmlcsstwitter-bootstrapbootstrap-4

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

问题描述

解决方案

推荐阅读