我正在使用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;
“,但它没有按我想要的方式工作。
1条答案
按热度按时间s8vozzvw1#
我找到了一个解决方案,使用容器和图像中的定位。
CSS: