2011-11-15 10 views
0

このウェブサイト(Pickture)を使用すると、ほぼすべてのサイズの写真をアップロードできます。 これは、表示に際して頭痛を引き起こします。

現在、この問題が発生しています。画像はコンテナDIVの中にあります(これは私が触れていない方が好きです)。幅は100%に設定され、高さは空白のままです。つまり、200x200の場合でもすべての画像が600x600程度に拡大縮小されます。

これは私がしたいことです。画像の幅が650pxより大きい場合は、幅を100%に設定します。幅がそれより小さい場合は、イメージの幅をイメージの幅(実際のサイズ)に設定します。

私はおそらく、jQueryとPHPの組み合わせでこれを行う可能性が考えていた - 画像の大きさを取得するにはPHP、とjQuery PHPで入れたいくつかの変数に基づいて、表示寸法を設定する - 例えば:PHPでイメージの幅と高さを動的に設定します。

<script type="text/javascript"> 
    var imageWidth = <?php echo 'something';?> 
    if (imageWidth > 650) { 
      $('#image').css('width', '100%'); 
    } else { 
      $('#image').css('width', '<?php echo 'something';?>'); 
    } 
</script> 

私はこの難解を解決するのを手助けできる人に感謝します。

+0

であなたは、これは便利かもしれない、あなたが動的に安心して画像のサイズを変更できるようになります:http://stackoverflow.com/questions/7553247/ PHP画像リサイズ/ 7553540#7553540 – Herbert

+0

いいえ、これは彼が何を求めているのではない@Herbert –

+0

@Truth:違いは? – Herbert

答えて

2

あなたのアイデアはうまくいくはずです。ここに例があります、それは私のために働く。それが表示されますので(私は画像のdivにスタイルを設定した。あなたは画像自体のサイズを変更したい場合は、代わりにdiv要素の、それは同じように動作します。あなたは、に書いたものを行うことができます

間違い
<?php 
$image_path = "yourpath/yourimage"; 

list($width, $height, $type, $attr)= getimagesize($image_path); 
?> 

<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<title>zzz</title> 

<script type="text/javascript" src="pathtojquery/jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
var imageWidth = <?=$width?>; 
if (imageWidth > 650) { 
     $('#image').css('width', '100%'); 
} else { 
     $('#image').css('width', '<?=$width?>'); 
} 
}); 
</script> 

</head> 
<body> 
<div id='image' style='background-color: #ececec; border: 2px dotted #000000;'> 
<img src='<?=$image_path?>'> 
</div> 

</body> 
</html> 
2

代わりに、CSS max-widthプロパティを使用しています。

display: blockも設定する必要があります。

もちろん、この方法ではキャッチがあり、それはおそらく巨大な画像をブラウザに送信しているということです。そのためには、PHPでimagecopyresampled()を使って動的にサイズを変更することができます。

+0

+1。純粋なCSSソリューションと私が提案しようとしていたもの。 –

+0

これは本当に私が求めていたものではありません。PHPを使ってPHPにCSSを統合することで、最大幅も動的に設定する必要があります。 – Alfo

0

あなたの質問が、ちょうど次のように変更します:あなたは、他のブロックで、CSSの幅を設定しているときに、画像の幅に

  • 追加「PX」を

そしてもちろん、このべき内にある$(document).ready(function(){ ... });

関連する問題