PHP Изменение размера изображения перед загрузкой в ​​указанный каталог

Question

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

<img id="imgs" src="http://placehold.it/200x200" alt="your image"/> 

мой загрузчиком идет что-то вроде этого

if (!!$_FILES['file']['tmp_name']) // is the file uploaded yet? 
{ 
    $info = explode('.', strtolower($_FILES['file']['name'])); // whats the extension of the file 
    $temp = explode(".",$_FILES["file"]["name"]); 
    $filename = rand(1,9999) . '.' .end($temp); 
    if (in_array(end($info), $allow)) // is this file allowed 
    { 
     if (move_uploaded_file($_FILES['file']['tmp_name'], $todir . $filename)) 
     { 

     } 
    } 
    else 
    { } 
} 

кстати этот загрузчик скрипт из учебника, так что да вы можете найти несколько безопасности и другие вопросы здесь ..

У меня возникли проблемы с изображением, когда я загрузил изображение размером 200x200, потому что в моем css я определил imgs с шириной и высотой, установленной как на 200 пикселей, так и при загрузке других изображений, соответствуют ширине и h восемь, которые я установил на моем css, изображение превращается в растянутое, если его больше

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

Answer 1

Вот простой учебник о изменении размеров изображений в https://phpmatters.com/resize-image-using-php/

Вот пример того, как фрагмент можно изменить размер изображения пользователя. Существует несколько интеллектуальных опций. Изменение размера PHP умнее, чем позволяет пользователям вставлять огромные изображения в HTML-страницу (только метод определения только CSS).

Например, если вы хотите изменить размер до заданной ширины (например, 200px), но сохраните соотношение размеров, то сценарий может выработать необходимую высоту для вас, просто используйте функцию resizeToWidth.

<?php 
    include('SimpleImage.php'); 
    $image = new SimpleImage(); 
    $image->load('picture.jpg'); 
    $image->resizeToWidth(200); 
    $image->save('picture200x200.jpg'); 
?> 

По размеру PHP, вы можете также отказаться от изображения меньше, чем 200x200, поэтому вам не придется беспокоиться о недопустимо маленькие изображения сохраняются. не

... этот плагин больше не поддерживается из-за безопасность использует

FWIW, если у вас есть доступ к файлу .htaccess на сервере, добавляя, что это будет отрицать внешний доступ к timthumb. PHP. Это большая библиотека, если она используется внутри.

# Prevent 'timthumb' hack attempt 
RewriteRule ^(.*)?(timthumb\.php)$ - [F] 

EDIT: Альтернативная библиотека для TimThumb является библиотека WideImage, которая имеет множество функций, в http://wideimage.sourceforge.net/examples/resizing/

Вот нить на SO об использовании его здесь: Keeping aspect ration when resizing images using WideImage PHP library

Answer 2

Если вы хотите, чтобы полагаться только на CSS для изменения размера не использовать width и height но max-width и max-height. Пример (непроверенный):

.my-img { 
    max-width: 200px; 
    max-height: 200px; 
} 

Таким образом, вы должны иметь возможность сохранить соотношение ширины и высоты.

Answer 3

Я бы добавил, к чему прокомментировал такон. Вы должны сделать это вот так.

img#imgs { 
     height: 100%; 
     max-height: 200px;    
     width: 100%; 
     max-width: 200px; 

} 

Answer 4

Вот пара чередуется с другими ответами.

Одним из вариантов является физическое изменение изображения. Вот рабочий GDlib изображение изменения размера/культур, которые будут изменять размер изображения, а также культуры:

Crop/Resize Image Function using GD Library

Другой вариант, чтобы сделать <div> вы можете использовать комбинацию заголовка css и инлайн css:

<style> 
div#img { 
    /* don't repeat background */ 
    background-repeat: no-repeat; 
    /* "cover" will force the image to flood the background */ 
    /* based on smaller dimension */ 
    background-size: cover; 
    height: 200px; 
    width: 200px; 
    display: inline-block; 
} 
</style> 

<div id="img" style="background-image: url('http://placehold.it/200x200.jpg');"></div> 

Answer 5

Это должно поддерживать требуемую высоту и правильное соотношение сторон. Размер изображения не будет превышать предопределенные 200 X 400, установленные в CSS.

CSS: 
body{margin: 0;padding:0;} 
#styled>div{ 
    position:relative; 
    margin: 0 auto; 
    max-width:400px; 
    background: #333; 
    text-align:center; 
    border:1px solid lime; 
    } 
#styled>div>img{ 
    max-height:200px; 
    } 
#not-styled>div{ 
    position:relative; 
    margin: 0 auto; 
    background: #333; 
    text-align:center; 
    border:1px solid blue; 
    } 



HTML: 
<div id="styled"> 
     <div><img src="path/to/your/image.png" alt="" /><p>img size: 250x250</p></div> 
     <div><img src="path/to/your/image2.png" alt="" /><p>img size: 850x500</p></div> 
    </div> 
    <div id="not-styled"> 
     <p>NOT styled</p> 
     <div><img src="path/to/your/image.png" alt="" /><p>img size: 250x250</p></div> 
     <div><img src="path/to/your/image2.png" alt="" /><p>img size: 850x500</p></div> 
    </div> 

Вы можете увидеть пример на webbdesign.ca/photo_aspect_example.html