Question

我想将我的图像恰好适合div（col-xl-4）。我尝试过并留在太空中。您可以查看视觉效果。 https://i.hizliresim.com/mMERz1.jpg

在我的代码下面；

<div class="row mt-5 mb-2 border">
            <div class="col-xl-8 custom-min-height">
                <img class="img-fluid mb-0" src="resources/images/image-24.jpg">
            </div>
            <div class="col-xl-4 border">
                <div class="row mb-2">
                    <div class="col">
                        <img class="img-fluid" src="resources/images/image-20.jpg">
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <img class="img-fluid" src="resources/images/image-21.jpg">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-4">
                <img class="img-fluid" src="resources/images/image-20.jpg">
            </div>
            <div class="col-xl-4">
                <img class="img-fluid" src="resources/images/image-21.jpg">
            </div>
            <div class="col-xl-4">
                <img class="img-fluid" src="resources/images/image-18.jpg">
            </div>
        </div>

Answer 1

在我的解决方案下面。请您自行编写解决方案。低于CSS样式

.img-fitting {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

index.html

<div class="row mt-5 mb-3">
            <div class="col-xl-8">
                <img class="img-fluid mb-0 img-fitting" src="resources/images/image-24.jpg">
            </div>
            <div class="col-xl-4 pl-0">
                <div class="row mb-3">
                    <div class="col">
                        <img class="img-fluid img-fitting" src="resources/images/image-20.jpg">
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <img class="img-fluid img-fitting" src="resources/images/image-21.jpg">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-4">
                <img class="img-fluid img-fitting" src="resources/images/image-20.jpg">
            </div>
            <div class="col-xl-4 pl-0">
                <img class="img-fluid img-fitting" src="resources/images/image-21.jpg">
            </div>
            <div class="col-xl-4 pl-0">
                <img class="img-fluid img-fitting" src="resources/images/image-18.jpg">
            </div>
        </div>

如何使用Bootstrap 4.1适应图像？

1 个答案: