Question

所以 - 我有这个网站（Pickture），它允许用户上传几乎任何尺寸的照片。在显示它们时会引起头痛。

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

我想要发生的是这个。如果图像的宽度大于650像素，请将宽度设置为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>

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

Answer 1

我改为使用CSS max-width属性。

您还必须设置display: block。

当然，这种方法有一个问题，那就是你可能会向浏览器发送大量图像。为此，您可以使用imagecopyresampled()使用PHP动态调整它们的大小。

Answer 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>

Answer 3

你肯定可以做你在问题中写的那些，但只需做出以下改变：

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

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

内

Answer 4

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

它允许您使用mod_rewrite

轻松动态调整图像大小

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

4 个答案: