Измените размер ряда изображений, чтобы соответствовать контейнеру фиксированного размера, не обрезая их
У меня проблема с сайтом, который я создаю, который содержит страницу галереи. Макет, который им требуется, состоит в том, чтобы иметь переменное количество изображений в строке (максимум 4 или меньше), и чтобы все эти изображения соответствовали всей ширине элемента контейнера (для этого случая я выберу 1100px), но у всех есть одинаковая высота и соотношение сторон, и не обрезать изображения.
Вот пример того, что я имею в виду (где цветные блоки представляют изображения):
http://imgur.com/BdokhwE
Я был бы признателен за любую помощь в создании функции php, которая могла бы взять размеры 4 заданных изображений и вычислить значения ширины и высоты для каждого изображения, чтобы они могли плотно прилегать к контейнеру, что я могу применить с некоторыми встроенными CSS.
Я могу управлять получением размеров изображения и применением встроенного CSS, но я поставлен в тупик на вычислениях, которые мне нужно выполнить, чтобы на самом деле определить, какими должны быть их соответствующие размеры.
Большое спасибо!
Решение
Вы можете использовать элемент стиля HTML.
<img src="..." style="max-height:1100px" />
это сделает их всех такой высоты, а соотношение сторон останется таким же, как у большей версии, однако вы не сможете сделать 4 / ряд без обрезки.
Другие решения
Если вы не против потратить несколько строк кода, посмотрите здесь: 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, это должно быть вашей задачей, так как я не знаю, с какими форматами и т.п. вы работаете. Но тот, который приведен на странице руководства, должен помочь вам начать там.
Идея этого исходит от кеширования. В основном вы кэшируете версии с измененным размером, сохраняя их в файловой системе и повторно используя их. Эффективно сокращая количество отправляемых данных.
Надеюсь, поможет. 🙂