Question

我有这个网站：

代码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-md-4内的.col-lg-7内，其宽度为352px，另一张图片位于.col-lg-6内{{1}它的宽度为.col-lg-5，因为你的图像是方形图像，所以要获得相同的高度你也应该有相同的宽度，这在代码中没有发生

怎么能像高度图像一样？

1 个答案: