2016-01-19 218 views
1

當我把作爲背景圖像被剪切圖像,這裏有一個例子: http://midanew.wpengine.com/背景圖像切

看第一個大圖像(與尖叫人),現在直到看到同樣向下滾動由於照片被剪切,所以只能用手拍照。 這兩張圖片是一樣的。爲什麼秒畫面被剪切,我怎樣才能使圖片看起來一樣?

爲第一張圖片中的代碼:

<div class="col-sm-8"> 
      <?php 
      $attachment_id = get_field('rectangular_image'); 
      $main_post_img = wp_get_attachment_image_src($attachment_id, 'full'); 
      if ($attachment_id){ ?> 
       <img src="<?php echo $main_post_img[0] ?>"> 
      <?php 
      }else{ ?> 
       <a href=<?php the_permalink()?>><?php the_post_thumbnail(); ?> </a> 
      <?php }?> 
</div> 

,第二個:提前

$first_special_img_id = get_field('rectangular_image'); 
    if ($first_special_img_id) 
     $first_special_img = wp_get_attachment_image_src($first_special_img_id, 'full'); 
    else 
     $first_special_img = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full'); 
      ?> 
    <a href=<?php echo esc_url(get_permalink()); ?> rel="<?php the_title();?>"> 
     <div class="special-project-section" style="background: url('<?php echo $first_special_img[0]; ?>')"> 
      <?php 
      echo '<div class="special-cat-on-img">'; 
      echo '<h5><div class="special-cat-name-img">' . __('Special Project', 'mida') . '</div></h5>'; ?> 
      <h6 class="speical-cat-title-img"><a href="<?php the_permalink()?>"> <?php the_title() ?> </a></h6>     
      <?php echo '</div>'; ?> 
      <?php echo '<div class="special-proj-ex">' . get_the_excerpt() . '</div>'; ?> 
      <div class="blue-line"></div> 
     </div> 
    </a> 

謝謝!

回答

1

添加

background-size: contain; 

到行

<div class="special-project-section" style="background: url('<?php echo $first_special_img[0]; ?>')"> 

也就是說,更換符合

<div class="special-project-section" style="background: url('<?php echo $first_special_img[0]; ?>');background-size: contain;"> 

在你的第二個圖像。

請參見下面的截圖

enter image description here

docs有關background-css更多細節。

0

您的css爲您的第二個圖像的div類,「.special-project-section」的寬度爲750,高度爲300.您的圖像爲944x415。因此將被削減。讓他們看起來像CSS類一樣的變化。

如果您想保留DIV同樣大小嚐試用CSS來居中圖像就像提到here

background: url(url) no-repeat center;