HTML Otomatik Resim Boyutlandırma

Arkadaşlar otomatik resim boyutlandırma koduna ihtiyacım var

Mesela kod : {XXX} Bu kod profildeki avatar kodu diyelim..

Bunu otomatik olarak 100*100 olarak nasıl boyutlandıracağım ?

<div style="width:100px;height:100px;">{XXX}</div> olur mu acaba ?

avatar için bir sınıf olsun diyelim

.avatar
{
width:100px;
height:100px;
}

html kodundada <div class="avatar"> </div>

şeklinde yapabilirsiniz.Tabi içinde resim olması şart

div'e boyut vermektense img tagına vermek daha iyi olabilir.
Örneğin:

.sinifim img { width: 100px; height:100px; }

<div class="sinifim"><img src="avatar.gif" alt="" border="0" /></div>

Sonrasında ekleyeceğiniz her resmin 100x100px ebatlarını alacağını da unutmayınız lütfen

avatar için bir sınıf olsun diyelim

.avatar
{
width:100px;
height:100px;
}

.avatar img
{
max-width:100px;
max-height:100px;
}

bu şekilde kodu ekle. daha iyi verim alırsın avatar 100 e 100 olarak ayarlarsan resim kucukte olsa 100e 100 ayapar çözünürlük bozulu
r eger boyle yaparsan benimn gosterdiğim gibi çözünürlükler bozulmaz ve değişiklik olmaz.. tabi hepsi aynı boyutta olsun dersen o ayrı mesele.

bu resim en kalitesiz bir biçimde görünecektir eğer seri bir resim ekleme olacaksa bu tercih edilmez. Php ile yazılmış bir kaç fonksiyon var bunları tercih edebilirsin.

$size = 300; // küçük resmin yüksekliği, genişlik buna göre ayarlanacak
$filedir = 'images/urun/'; // orjinal resmin kopyalanacağı klasör,
$thumbdir = 'images/urun/'; // küçültülmüş resmin kopyalanacağı klasör
$prefix = 'small_'; // küçültülmüş resmin ön tarafına gelecek önisim(bundan emin değilim)

$maxfile = '2000000';
$mode = '0666';

$userfile_name = $_FILES['image']['name'];
$userfile_tmp = $_FILES['image']['tmp_name'];
$userfile_size = $_FILES['image']['size'];
$userfile_type = $_FILES['image']['type'];

if ($_FILES['image']['name']!="")
{
$prod_img = $filedir.$userfile_name;

$prod_img_thumb = $thumbdir.$prefix.$userfile_name;
move_uploaded_file($userfile_tmp, $prod_img);
chmod ($prod_img, octdec($mode));
$sizes = getimagesize($prod_img);

$aspect_ratio = $sizes[1]/$sizes[0];

if ($sizes[1] <= $size)
{
$new_width = $sizes[0];
$new_height = $sizes[1];
}else{
$new_height = $size;
$new_width = abs($new_height/$aspect_ratio);
}

$destimg=ImageCreateTrueColor($new_width,$new_heig ht)
or die('Problem In Creating image');
$srcimg=ImageCreateFromJPEG($prod_img)
or die('Problem In opening Source Image');
if(function_exists('imagecopyresampled'))
{
imagecopyresampled($destimg,$srcimg,0,0,0,0,$new_w idth,$new_height,ImageSX($srcimg),ImageSY($srcimg) )
or die('Problem In resizing');
}else{
Imagecopyresized($destimg,$srcimg,0,0,0,0,$new_wid th,$new_height,ImageSX($srcimg),ImageSY($srcimg))
or die('Problem In resizing');
}
ImageJPEG($destimg,$prod_img_thumb,90)
or die('Problem In saving');
imagedestroy($destimg);
$resim=$prod_img;
$kucukresim=$prod_img_thumb;

Kod alıntıdır

ben genellikle sunu kullanıyorum
<img src="xxx.jpg" width="100" height="100" />

Konuyu hortlatıyorum ama şu kod hangisi doğru ? Altta ki mi üstte ki mi? Aradaki fark sadece sonunda boşluk ve kesme işareti var.

<img src="/image/urunler/resim.jpg" class="img-fluid border-radius-0 cerceve" alt="Resim" width="255" height="255">

<img src="/image/urunler/resim.jpg" class="img-fluid border-radius-0 cerceve" alt="Resim" width="255" height="255" />

alttaki kod bitirilmiş üsttekini </img> olarak bitirmen gerekiyor