php - 避免拉伸照片

Question

如何避免照片拉伸？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';
    }

Answer 1

我只是检查方向是否是纵向并添加一个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;
}

Answer 2

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

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

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

HTML - 在保持纵横比的同时尽可能大地显示图像

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

Answer 3

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

像这样：

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

Answer 4

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