html - 如何等于高度图像？

Question

我有这个网站:

link

代码 HTML:

 <div class="row news-wrap row-flex2">
            <div class="col-lg-7" style="background:red;">
                <div class="news-title">
                    <div class="row text-center">
                        <img src="<?php echo get_template_directory_uri(); ?>/assets/img/ICON-NEWS.png" width="100px" height="100px">
                    </div>
                    <div class="row title-news">
                        <p class="food_drink"><?php echo ot_get_option('title_news'); ?></p>
                        <div class="cont-food">
                            <p class="food_drink_descr"><?php echo ot_get_option('news_descr'); ?></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-5" style="background:blue;">
               <div class="col-lg-6 media no-margin">
                   <a target="_blank" href="<?php echo ot_get_option('instagram_photo_1'); ?>">
                       <?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_1').'" s="t"]'); ?>
                   </a>
                   <div class="media__body">
                       <h2>Image Title</h2>
                       <p>Description</p>
                   </div>
               </div>
                <div class="col-lg-6 media no-margin">
                    <a target="_blank" href="<?php echo ot_get_option('instagram_photo_2'); ?>">
                        <?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_2').'" wrap_margin="10" s="t"]'); ?>
                    </a>
                    <div class="media__body">
                        <h2>Image Title</h2>
                        <p>Description</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row news-wrap row-flex2">
            <div class="col-lg-7" style="background: yellowgreen">
                <div class="col-md-8 media">
                    <?php echo do_shortcode('[display-posts include_excerpt="false" category="news" image_size="news" wrapper="div" posts_per_page="1" orderby="date"]'); ?>
                    <div class="media__body">
                        <h2>Image Title</h2>
                        <p>Description</p>
                    </div>
                </div>
                <div class="col-md-4 media">
                    <a target="_blank" href="<?php echo ot_get_option('instagram_photo_3'); ?>">
                        <?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_3').'" s="t"]'); ?>
                    </a>
                    <div class="media__body">
                        <h2>Image Title</h2>
                        <p>Description</p>
                    </div>
                    <a target="_blank" href="<?php echo ot_get_option('instagram_photo_4'); ?>">
                        <?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_4').'" s="t"]'); ?>
                    </a>
                    <div class="media__body">
                        <h2>Image Title</h2>
                        <p>Description</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-5" style="background: lightgoldenrodyellow">
                <div class="col-lg-6 media">
                    <a target="_blank" href="<?php echo ot_get_option('instagram_photo_5'); ?>">
                        <?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_5').'" s="t"]'); ?>
                    </a>
                    <div class="media__body">
                        <h2>Image Title</h2>
                        <p>Description</p>
                    </div>
                </div>
                <div class="col-lg-6 no-margin media">
                    <a target="_blank" href="<?php echo ot_get_option('instagram_photo_6'); ?>">
                        <?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_6').'" s="t"]'); ?>
                    </a>
                    <div class="media__body">
                        <h2>Image Title</h2>
                        <p>Description</p>
                    </div>
                </div>
                <div class="col-md-12 no-margin media img-mare-dreapta">
                    <?php echo do_shortcode('[display-posts include_excerpt="false" offset="1" category="news" image_size="news" wrapper="div" posts_per_page="1" orderby="date"]'); ?>
                    <div class="media__body">
                        <h2>Image Title</h2>
                        <p>Description</p>
                    </div>
                </div>
            </div>
        </div>

image

这个布局是用 bootstrap 构建的，不明白问题是什么以及为什么图像高度不一样

如何使图像大小相同？

提前致谢!

Answer 1

您的问题是您的第一张图片位于 .col-lg-7 内的 .col-md-4 内，宽度为 352px 而另一张图片位于 .col-lg-5 内的 .col-lg-6 中，宽度为 377px并且由于您的图像是方形图像，因此要获得相同的高度，您也应该具有相同的宽度，这在您的代码中没有发生