html 如何才能使此图像在分区中不变大？

s4n0splo 于 2022-11-20 发布在其他

关注(0)|答案(1)|浏览(119)

我正在使用Bootstrap 4.6和WordPress与ACF插件，我需要帮助的东西在这里。我需要一节的行调整其高度与列有文字和东西，但图像越来越大，使行也越来越大，这会导致页面底部有一个很大的空间。我需要自动调整，因为该部分的内容和图像是动态的。它可以改变，因为我不能简单地设置一个最大高度。
Image 1: Top of the section
Image 2: Bottom of the section
Image 3: Bottom of the section showing the extra space
Image used in the section

<section id="about">
        <div class="about-section position-relative overflow-hidden" style="background: linear-gradient(180deg, #00AEA0 0%, rgba(0, 131, 120, 0.5) 118.6%);">
            <img class="position-absolute bottom-0 right-0" src="<?php bloginfo('template_directory'); ?>/assets/img/about-us-background.png" style="max-width: 50%;">

            <div class="row">
                <div class="col-12 col-lg-4 px-0">
                    <?php if (get_field('about_image')) : ?>
                        <img class="w-100 h-100 object-cover d-none d-lg-block" src="<?php the_field('about_image');; ?>">
                    <?php endif; ?>
                </div>

                <div class="col-12 col-lg-6 offset-lg-1">
                    <div class="px-4 px-lg-0 py-5 py-md-6">
                        <h1 class="title text-lg-left"><?php the_field('about_title'); ?></h1>

                        <div class="text-md-justify mt-4">
                            <?php the_field('about_text'); ?>
                        </div>

                        <a href="<?php the_field('about_button_link'); ?>" class="btn-custom btn-blue-1 mt-3 px-4 px-md-5"><?php the_field('about_button_text'); ?></a>

                        <div class="row gap-8 gap-lg-4 mt-5">

                            <?php if (have_rows('benefits')) : ?>
                                <?php while (have_rows('benefits')) : the_row(); ?>

                                    <div class="col-12 col-sm">
                                        <div class="d-flex flex-column gap-4">
                                            <div class="hover-flip">
                                                <div class="benefit-icon">
                                                    <?php if (get_sub_field('image')) : ?>
                                                        <img src="<?php the_sub_field('image'); ?>">
                                                    <?php endif ?>
                                                </div>
                                            </div>
                                            <span class="font-weight-bold text-lg"><?php the_sub_field('name'); ?></span>
                                        </div>
                                    </div>

                                <?php endwhile; ?>
                            <?php endif; ?>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

我试过使用这个CSS属性：图像上显示“width: 100%; height: 100%; object-fit: cover;“，但它没有按我想要的方式工作。

Html

来源：https://stackoverflow.com/questions/74495225/what-can-i-do-for-this-image-to-not-grow-bigger-in-the-section

1条答案

按热度按时间

s8vozzvw1#

我找到了一个解决方案，使用容器和图像中的定位。

<section id="about">
        <div class="position-relative overflow-hidden" style="background: linear-gradient(180deg, #00AEA0 0%, rgba(0, 131, 120, 0.5) 118.6%);">
            <img class="position-absolute bottom-0 right-0" src="<?php bloginfo('template_directory'); ?>/assets/img/about-us-background.png" style="max-width: 50%;">

            <div class="row no-gutters">
                <div class="col-12 col-lg-4">
                    <div class="h-100-img-container">
                        <?php if (get_field('about_image')) : ?>
                            <img class="w-100 h-100 object-cover d-none d-lg-block" src="<?php the_field('about_image'); ?>">
                        <?php endif; ?>
                    </div>
                </div>

                <div class="col-12 col-lg-6 offset-lg-1">
                    <div class="px-4 px-lg-0 py-5 py-md-6">
                        <h1 class="title text-lg-left"><?php the_field('about_title'); ?></h1>

                        <div class="text-md-justify mt-4">
                            <?php the_field('about_text'); ?>
                        </div>

                        <a href="<?php the_field('about_button_link'); ?>" class="btn-custom btn-blue-1 mt-3 px-4 px-md-5"><?php the_field('about_button_text'); ?></a>

                        <div class="row gap-8 gap-lg-4 mt-5">

                            <?php if (have_rows('benefits')) : ?>
                                <?php while (have_rows('benefits')) : the_row(); ?>

                                    <div class="col-12 col-sm">
                                        <div class="d-flex flex-column gap-4">
                                            <div class="hover-flip">
                                                <div class="benefit-icon">
                                                    <?php if (get_sub_field('image')) : ?>
                                                        <img src="<?php the_sub_field('image'); ?>">
                                                    <?php endif ?>
                                                </div>
                                            </div>
                                            <span class="font-weight-bold text-lg"><?php the_sub_field('name'); ?></span>
                                        </div>
                                    </div>

                                <?php endwhile; ?>
                            <?php endif; ?>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

CSS：

.h-100-img-container {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .h-100-img-container img {
        position: absolute;
        display: block;
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: top;
    }

赞(0）回复(0）举报 2022-11-20

我来回答

html 如何才能使此图像在分区中不变大？

1条答案

相关问题

热门标签

最新问答