Question

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

这些div中的每一个都包含：

图片或轮播
单词对（始终适合单行）
单选按钮，它们也适合单行。

所有divs的维度如下：

width: 230px;
height: 270px;

我在div内的图像/轮播放置方面遇到问题。我将图像/轮播的尺寸指定为180px by 180px。

但是，图像以某种方式占据了div的所有宽度，即宽度为230像素的图像呈现，而图像的高度仅为180像素。参见下面的外观。

所需的输出：图像/轮播仅应渲染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>

Answer 1

将图片规则设置为包括max-width：180px;和宽度：100％；

有兴趣的更多信息：https://blog.prototypr.io/what-even-is-the-difference-between-width-and-max-width-8f37b282c7f1

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

1 个答案: