2016-03-06 122 views
0

我有这个网站:如何能像高度图像一样?

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

这种布局是建立与引导,不明白的问题是什么,为什么图像身高不一样

如何让图像具有相同的尺寸?

提前致谢!

回答

0

你的问题是,你的第一个图像是内部.col-md-4一个.col-lg-7其中有352px宽度和其他图像里面是.col-lg-6.col-lg-5这是有377px宽度和您的图片是方形的图像,以便获得内相同的高度,你也应该有相同的宽度,这是不是在你的代码发生