動態更改圖像高度

你好我正在嘗試動態生成不同的多個圖像高度。這很像最有趣的佈局。我需要一個特定的最低高度像100px左右。然後我需要一個像400px一樣的最大高度。然後我需要爲不同的圖像改變這個高度。動態更改圖像高度

這裏是我的代碼：

<div class="pin_image"> 
    <a href="<?php the_permalink(); ?>"> 
     <img width="191" height="auto" class="<?php echo $img_class; ?>" src="<?php echo PricerrTheme_get_first_post_image(get_the_ID(),102,72); ?>" /> 
    </a> 
</div>

這是所有在我的主頁圖像的代碼。

來源

2012-10-18 new503

我不知道我是否真的想要做什麼，但是如何爲您的img元素添加一個css類。例如： -

.myclass { min-height: 100px; max-height: 400px; }

編輯

要回答你的第二個問題。其實不確定你想要做什麼，但我們至少應該有一個想法。

您可以使用Javascript生成一個隨機數並將其應用於類.myclass的元素的屬性height。 jQuery將有所幫助：

var height = Math.floor((Math.random()*300)+100); 
$('.myClass').attr('height', height);

來源

2012-10-18 18:35:19

謝謝你，有很大幫助。你知道我怎麼可以混合不同的圖像高度？代碼顯示了所有的圖像。所以，如果我將高度設置爲200px，那麼它會將所有圖像高度更改爲200px。我想要圖像生成一個100像素和300像素之間的隨機高度。 – new503

@ user1021327在上面的編輯中回答。 –

使用PHP的rand（）。在那裏設置最小 - 最大值。

<img height="<?php echo rand(100, 400); ?>" class="<?php echo $img_class; ?>"

最高值爲400;最低將會是100.

與此有關的一個怪癖是它可能/會增加一個數字;不過，我認爲這是一個起點。你可能會更聰明，把它全部包裝在一個函數中，這樣你的程序代碼會更容易一些。

function pinIt() { 
$n = rand(100,400); 
// cool code here to ensure the value is divisible by 20 // 
// just a thought 
return $n; 
} 

<img height="<?php echo pinIt(); ?>" class="<?php echo $img_class; ?>" />

編輯：這樣的...

<?php 
    function pinIt() { 
     $n = rand(100, 400); 
     if($n % 20 != 0) { 
      $n += 20 - ($n % 20); 
     } 
     return $n; 
    } 
?> 

<img height="<?php echo pinIt(); ?>" class="<?php echo $img_class; ?>" />

來源

2012-10-18 18:58:32 Dawson

謝謝你的第一個代碼工作，但我最後的代碼有問題.. – new503

沒關係我得到它的工作非常感謝你！ – new503

如何使圖像的瞳孔比例顯得不那麼糟糕？ – new503

動態更改圖像高度

回答

相關問題