PHP - изменение размера изображения в соответствии с контейнером фиксированного размера без обрезки их

Question

У меня проблема с сайтом, который я создаю, который содержит страницу галереи. Макет, который им требуется, состоит в том, чтобы иметь переменное количество изображений в строке (максимум 4 или меньше), а для всех этих изображений - всю ширину элемента контейнера (для этого случая я буду идти с 1100px), но все они имеют одинаковое соотношение высоты и размера и не обрезать изображения.

Вот пример того, что я имею в виду (где цветные блоки представляют изображения): http://imgur.com/BdokhwE

Я был бы признателен за любую помощь в создании функции PHP, которая может принять размеры 4 данных изображений и рассчитать значения ширины и высоты для каждого изображения, чтобы они могли плотно вписаться в контейнер, который я могу применить с некоторым встроенным css.

Я могу управлять получением размеров изображения и применением встроенного css, но я нахожусь в тупике по вычислениям, которые мне нужно будет выполнить, чтобы реально определить, какими должны быть их соответствующие размеры.

Большое спасибо!

Answer 1

Вы можете использовать элемент стиля HTML.

это сделало бы их всю высоту, а соотношение сторон оставалось бы таким же, как и в более крупной версии, однако вы не сможете сделать 4/ряд без обрезки.

Answer 2

Если вы не возражаете тратить несколько строк кода, а затем посмотреть здесь: http://php.net/manual/en/function.imagecopyresized.php

Используя эту функцию, с чем-то вроде этого, даст вам очень хороший результат. Ниже псевдокод:

<?php 
// From the manual 
function resizeImage(...) {...} 

function getImage($imageName, $width, $height) { 
    $dir = dirname($imageName); 
    $bImgName = basename($imageName); 
    $newName = "{$dir}/{$width}x{$height}.{$bImgName}"; 
    if(!file_exists($newName)) { 
     resizeImage($newName, $width, $height); 
    } 
    return $newName; 
} 
?> 

Далее, в вашем HTML ...

<div id="myDiv"> <!-- #myDiv { width: 400px; } --> 
    <img src="<?=getImage('img/myCoolPicture.jpeg', 400,400)?>"> 
</div> 

Это в основном получается

img/myCoolPicture.jpeg 

в

img/400x400.myCoolPicture.jpeg 

и даже повторно использовать это тоже!

Я не писал реализацию для resizeImage, это должна быть ваша задача, поскольку я не знаю, с какими форматами и т. П. Вы работаете. Но тот, который указан на странице руководства, должен помочь вам начать работу там.

Идея для этого исходит из кеширования. Вы в основном кэшируете измененные версии, сохраняя их в файловой системе и повторно используя их. Эффективное сокращение количества отправленных данных.

Надеюсь, это поможет. :)