Избегайте растягивания фотографий

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';
    }

2

php image css resize stretch

Author: mirams, 2011-06-01

Source

4 answers

Вот хорошая статья о том, как поддерживать соотношение сторон с помощью CSS и HTML:

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

Кроме того, есть вопрос SO, который также дает пару идей о том, как это сделать:

HTML - отображение изображения как можно большего размера с сохранением соотношения сторон

В принципе, вам нужно масштабировать либо высоту, либо ширину, но не то и другое.

2

Author: IAmTimCorey, 2017-05-23 12:12:05

Отображать их в качестве фона <div> вместо <img>

Вот так:

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

0

Author: Teneff, 2011-06-01 14:13:52

Используйте функции php imagesx и imagesy и выдавайте возвращаемые значения в качестве атрибутов ширины и высоты тега изображения.

0

Author: horatio, 2011-06-01 14:18:12

score 5 · Accepted Answer

Я бы просто проверил, является ли ориентация протрайтом или нет, и добавил класс 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;
}