Html CSS和Boostrap：在div中安装图像或旋转木马

我在

Bootstrap grid

中得到了一系列

div

，因为它们是动态生成的，可以是任意数量的

每个

div

都包含：

• 图像或旋转木马
• 两个单词（始终放在一行中）
• 单选按钮，这些也适用于单行

所有

分区的尺寸如下所示：

width: 230px;
height: 270px;

我在
div
中遇到图像/转盘放置问题。我将图像/转盘的大小指定为
180px乘以180px

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


所需输出：图像/转盘应仅呈现180*180。这样我可以在两边各有一些空白

现有代码：

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

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>


{%用于跟踪\ id，图像\ URL.items%中的图像\路径}
{%if image_path | length==1%}
{映像中ip的%u路径%}
{%endfor%}
{{image_path | length}}面

行动1
行动2
行动3
{%else%}
{映像中ip的%u路径%}
{%if-forloop.counter==1%}
{%endif%}
{%endfor%}
{{image_path | length}}面

行动1
行动2
行动3
{%endif%}
{%endfor%}
将图像规则设置为包括最大宽度：180px；宽度：100%

如果感兴趣，请提供更多信息：
您是否可以尝试使用最大宽度：XXXpx和宽度：100%，而不仅仅是宽度（对于图像样式规则）？谢谢，我可以试一试。我会让你知道这里。你想让图像不拉伸，但它应该保持在其实际高度和宽度？我想要完整的图像，而不是裁剪。但它应该始终保持180*180的一致性。所以我猜较小的图像会被拉伸，而较大的图像会被缩小。我想是的……它在阿尔法罗密欧起作用了。如果你可以写一个答案，我会接受的。@downvoter-如果这个答案不正确/需要修改-请解释为什么（以便我们学习！）它帮助了OP，这才是重要的！可能是因为你的答案是怎么说的，但不是为什么。“为什么”的链接不是答案。编辑你的问题，解释你的解决方案解决问题的原因。它对我有效，因此我对它投了赞成票。有人也否决了这个问题