避免拉伸照片答案

【问题标题】：Avoid stretching photos避免拉伸照片
【发布时间】：2011-09-06 08:24:24
【问题描述】：

如何避免照片拉伸？ PHP 从一个文件夹中随机选择 2 张照片并使用echo 显示它们。但是现在，所有纵向照片都被拉伸了。

<?php if(!empty($images)) {
    $rand_key = array_rand($images, 1);
    $src = $images[$rand_key];
    echo "<img class=\"flickrphoto\" src='".$src."' align='absmiddle'>";

    unset($images[$rand_key]);
    $rand_key = array_rand($images, 1);
    $src = $images[$rand_key];
    echo "<img class=\"flickrphoto\" src='".$src."' align='absmiddle'>";
} else {
    echo 'Error';
} ?>

还有 CSS：

.flickrphoto {
    max-width: 100px;
    max-height: 100px;
    overflow: hidden;
}

** 编辑 **
当前代码：

   // protrait calculations;
    $size = getimagesize($images_folder_path);
    if($size[0] < $size[1]) {
        $orientation = 'portrait';
    } else {
        $orientation = 'landscape';
    }

【问题讨论】：

拉伸如何？我在这里看不到任何会使图像超出其自然宽度和/或高度的东西

标签： php css image resize stretch

【解决方案1】：

将它们显示为 <div> 而不是 <img> 的背景

像这样：

echo "<div class=\"flickrphoto\" style='background: url(".$src.");'></div>";

【讨论】：

这不是一个好建议，因为如果需要，他们不会缩小规模。

【解决方案2】：

使用 php 函数 imagesx 和 imagesy，并将返回值作为图像标签的宽度和高度属性发出。

【讨论】：

不用了，用CSS应该可以解决的。
@horatio 如果您甚至不明白 CSS 为何不工作，您不应该急于跳到消耗服务器资源的解决方案。
我知道它不起作用，因为他指定了一个（最大）高度和一个（最大）宽度，而不考虑图片的纵横比，他必须确定是否图片是“纵向”或“横向”纵横比。这可以在服务器或客户端上完成。我觉得你关心函数调用时间和资源很感人，但答案没有错。
那么，将其包含在您的答案中会很棒，而且我当然不会否决说明问题根源的完整答案。
giorgio 已经解决了这个问题，尽管使用的是getimagesize 而不是imagesx 和imagesy

【解决方案3】：

这是一篇关于如何使用 CSS 和 HTML 保持纵横比的好文章：

http://haslayout.net/css-tuts/CSS-Proportional-Image-Scale

此外，还有一个 SO 问题也提供了一些关于如何执行此操作的想法：

HTML - display an image as large as possible while preserving aspect ratio

基本上，您需要缩放高度或宽度，但不能同时缩放。

【讨论】：

【解决方案4】：

我只是检查方向是否是纵向并添加一个 css 类；

<?php if(!empty($images)) {
$rand_key = array_rand($images, 1);
$src = $images[$rand_key];

// protrait calculations;
$fullpath = // statement to fetch the path on the server
$size = getimagesize($fullpath);
if($size[0] < $size[1]) {
   $orientation = 'portrait';
} else {
   $orientation = 'landscape';
}

echo "<img class=\"flickrphoto ". $orientation ."\" src='".$src."' align='absmiddle'>";

unset($images[$rand_key]);
$rand_key = array_rand($images, 1);
$src = $images[$rand_key];
echo "<img class=\"flickrphoto\" src='".$src."' align='absmiddle'>";
} else {
    echo 'Error';
} ?>

在你的 css 中是这样的：

img.flickrphoto {
    max-width: 100px;
    max-height: 100px;
    overflow: hidden;
}
img.flickrphoto.portrait {
    max-width: 50px;
}

【讨论】：

这似乎是一个很好的解决方案，除了纵向计算总是给出landscape 属性...知道怎么做吗？
您是否打印出 $size[0]（应该是宽度）和 $size[1]（高度）变量？也许这有什么问题。还是您的图像不是“真正的”纵向和横向，而只是纵横比不同？在这种情况下，你应该这样做： $ratio = $size[0]/$size[1]; $orientation=($ratio > 1.2)?'风景':'肖像'; （你应该找出 1.2 位应该是什么）
我现在调整的代码在我的原始帖子中已有说明。也许我做错了什么？ $images_folder_path 是我的文件夹路径 (images/photos/)
@Michiel 当您检查方向时，您需要使用$images_folder_path . $src 之类的东西来获取您刚刚随机选择的图像的完整路径，而不是$images_folder_path。
但它是完整的服务器路径吗？（这与“网络”路径不同，例如；完整的服务器路径 /images/photos/ 与 example.com/images/photos 不是同一个文件夹），--编辑：并检查 @Michiel 的评论！