可擴展的特色照片 - WordPress的

我使用Bootstrap3創建一個WordPress主題，我使用像這樣的響應列：可擴展的特色照片 - WordPress的

 <div class="col-md-4"> 
     <div class="panel panel"> 
      <div class="panel-heading"><h1><?php the_title(); ?></h1></div> 
      <div class="panel-body"> 
        <p><?php the_post_thumbnail(); ?></p> 
        <p><?php the_content(__('(more...)')); ?></p> 
        <a href="javascript:void(0)" class="btn btn-primary">Take a look</a> 
      </div> 
     </div> 
    </div>

什麼我雖然注意到的是，該功能的圖像是不可擴展。他們已經設置了大小，但是不能將其定義爲寬度爲100％，在我的示例中爲類面板主體。

我想這樣做，因爲當屏幕大小發生變化時，所以列的大小也是如此，我希望圖像可以與它們一起縮放。

有沒有人知道這樣做的方式，我似乎已經變得有點卡住了。

來源

2015-05-13 K20GH

嘗試下面的代碼，使圖像分級：

<?php 
the_post_thumbnail('thumbnail', array('class' => 'img-responsive img-circle')); 
?>

來源

2015-05-13 09:52:32

爲什麼要添加'img-circle'？ –

你可以使用任何引導類圖像..你可以使用..如果你不想在列中使用圓形圖像，你可以放下它。 –

您需要添加.img-responsive類，使圖像響應自舉3

對於添加類.img-responsive到你的WordPress的圖像，你可以添加低於您的functions.php文件中的功能。

<?php 
//----------------------------------------------------------/ 
// responsive images [ 1) add img-responsive class 2) remove dimensions ] 
//----------------------------------------------------------/ 

function bootstrap_responsive_images($html){ 
    $classes = 'img-responsive'; // separated by spaces, e.g. 'img image-link' 

    // check if there are already classes assigned to the anchor 
    if (preg_match('/<img.*? class="/', $html)) { 
    $html = preg_replace('/(<img.*? class=".*?)(".*?\/>)/', '$1 ' . $classes . ' $2', $html); 
    } else { 
    $html = preg_replace('/(<img.*?)(\/>)/', '$1 class="' . $classes . '" $2', $html); 
    } 
    // remove dimensions from images,, does not need it! 
    $html = preg_replace('/(width|height)=\"\d*\"\s/', "", $html); 
    return $html; 
} 
add_filter('the_content','bootstrap_responsive_images',10); 
add_filter('post_thumbnail_html', 'bootstrap_responsive_images', 10);

希望它可以幫助你。

來源

2015-05-13 09:55:20

可擴展的特色照片 - WordPress的

回答

相關問題