Я работаю над форумом на PHP. В поле подписи у меня есть
" <img src='randomimage.png'><br>bla blah "
Если изображение больше поля, оно растягивает мои таблицы и выглядит плохо. Есть ли способ изменить размер изображения, если он слишком большой?
Извините за моего бедного английского и благодарю вас за чтение
Изменить: Дело в том, что это не только изображение. Это изображение и текст «большой текст».
С уважением, Том
Вы можете изменить размер изображений с помощью gdlibrary (см .: PHP / GD – Обрезка и изменение размеров изображений ), но это может быть сложно, если вы еще не знакомы с PHP.
Существует плагин, который может динамически изменять размеры изображений (растягивая сам образ). Ознакомьтесь с maxSide: http://css-tricks.com/maxside-jquery-plugin-and-how-to/
Быстрое решение для хранения подписи под присягой – это ограничение их переполнения с помощью css:
<img src="randomimage.png" />
становится
<div class="sigBox"><img src="randomimage.png" /></div>
Со следующим CSS:
div.sigBox { overflow:hidden; width:50px; height:50px; }
Это скроет большие изображения, а не позволит им исказить ваш контент.
Вероятно, вы сначала захотите принять размеры изображений. Затем вы можете сохранить соотношение сторон, задав новый размер с помощью простых атрибутов высоты и ширины HTML для тега img .
Вы также можете рассмотреть возможность размещения подписей на местном уровне. Когда пользователь загружает изображение, вы можете выполнить все изменения размера, а затем через GD Library .
<img src="/img/foo.png" height="100" width="100" />
Высота и ширина – в пикселях. Это если вы хотите изменить размер изображения в HTML (который загружает полное изображение, а затем «скручивает» его вокруг до указанных размеров).
Если вы хотите программно изменить файл физического изображения, проверьте функции PHP GD: http://us.php.net/manual/en/ref.image.php
Для форума, который я администрировал, мы поместили блок подписи в div с overflow: hidden набор в CSS. Таким образом, пользователь, который поставил массивное изображение подписи 600×300 и абзац текста, не получил никакой пользы от этого – появилась только указанная область 400×90. Казалось, что он хорошо работает.
Как указывали JoshL и John T, вы можете использовать встроенную поддержку обработки изображений php для динамического изменения изображений. В вашей ситуации вы можете просто создать php-скрипт, который будет загружать изображение, изменять его размер до соответствующих размеров, обслуживать его и сохранять кешированную копию измененного изображения, чтобы избежать обработки служебных данных при последующих запросах.
Вы в конечном итоге используете что-то подобное в своем HTML-коде
<img src="img.php?file=foobar.jpg">
Использование Javascript:
function changeSize(imageOrTextId, tableId) { if (document.getElementById(imageOrTextId).width > document.getElementById(tableId).width) { document.getElementById(imageOrTextId).width = document.getElementById(tableId).width; } }
Пример HTML:
<body onload="changeSize('image1', 'table1')"> <table id="table1" width="400" height="400"> <img src="randomimage.png" id="image1" /> </table> </body>
EDIT: Похоже, Джон Т также опубликовал этот способ сделать это … Извините, я не заметил его перед публикацией.
Использование css
<img src="randomimage.png" style="max-width:100px;max-height:100px;" />
Это работает во всех браузерах, которые я тестировал
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <?php $thumb_width = 100; $thumb_height = 100; $full = imagecreatefromjpeg('sample.jpg'); $width = imagesx($full); $height = imagesy($full); if($width < $height) { $divisor = $width / $thumb_width; } else { $divisor = $height / $thumb_height; } $new_width= ceil($width / $divisor); $new_height = ceil($height / $divisor); //get center point $thumbx = floor(($new_width - $thumb_width) / 2); $thumby = floor(($new_height - $thumb_height)/2); $new_image = imagecreatetruecolor($new_width, $new_height); $new_image_fixed = imagecreatetruecolor($thumb_width, $thumb_height); imagecopyresized($new_image, $full, 0, 0, 0, 0, $new_width, $new_height, $width, $height); imagecopyresized($new_image_fixed, $new_image, 0, 0, $thumbx, $thumby, $thumb_width, $thumb_height, $thumb_width, $thumb_height); imagejpeg($new_image, "new_sample.jpg", 100); imagejpeg($new_image_fixed, "new_sample_fixed.jpg", 100); ?> </body> </html>