使用 PHP 等动态设置图像的宽度和高度答案

【问题标题】：Dynamically set width and height of image with PHP and the such使用 PHP 等动态设置图像的宽度和高度
【发布时间】：2011-11-16 04:37:25
【问题描述】：

所以 - 我有这个网站 (Pickture)，它允许用户上传几乎任何尺寸的照片。这在显示它们时会让人头疼。

目前发生这种情况。图像位于容器 DIV 内（我希望保持不变），宽度设置为 100%，高度留空。这意味着所有图像，即使只有 200x200，也将被缩放到 600x600 左右。

我想发生的是这样的。如果图像的宽度大于 650px，则将宽度设置为 100%。如果宽度小于该值，则将图像的宽度设置为图像的宽度（实际大小）。

我在想我可能可以结合使用 jQuery 和 PHP 来做到这一点 - PHP 来获取图像的尺寸，而 jQuery 来设置基于 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>

感谢任何可以帮助我解决这个难题的人。

【问题讨论】：

您可能会发现这很有用：stackoverflow.com/questions/7553247/php-image-resizing/…
不，这不是他要问的@Herbert
@Truth：有什么区别？
@Herbert 他正在尝试在浏览器中调整图像大小，而不是使用 PHP 操作图像本身。
@Truth：当然这不是对 OP 问题的直接回答（这就是为什么它是评论）。这只是看待问题的另一种方式。我并不是在暗示这是一个骗局。

标签： php jquery

【解决方案1】：

我认为你的想法应该行得通。这是一个例子，它对我有用。（我已将样式设置为图像 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() 动态调整它们的大小。

【讨论】：

这并不是我真正想要的——因为最大宽度也必须通过 PHP 动态设置——将 PHP 集成到 CSS 中令人头疼。

【解决方案3】：

尝试使用 SLIR 等库：http://shiftingpixel.com/2008/03/03/smart-image-resizer/

它将允许您使用 mod_rewrite 轻松地动态调整图像大小

【讨论】：

【解决方案4】：

你当然可以做你在问题中写的，但只需进行以下更改：

在 else 块中设置 css 宽度时，将“px”附加到图像的宽度。

当然这应该在$(document).ready(function(){ ... });里面

【讨论】：