تعديل حجم الصورة داخل عنصر div

نستطيع القيام بذلك من خلال Html أو Css
بداية لاحظ معي الكود دون تعديل على حجم الصورة
كود Html

<div class="test">
   <img  src="test.png" alt="">
</div>

كود Css

.test{
    border: 1px solid #333;
    width: 50vw;
    height: 50vh;
}

حددت للحاوية div التي لها الصنف test طول وارتفاع وأعطيته بوردر
وسوف تكون النتيجة هكذا
الآن سوف نعدل في حجم الصورة باستخدام Html و Css
أولا من خلال Html : نعطي العنصر img خاصية width و height كالمثال الآتي

<div class="test">
   <img width="100%" height="100%" src="test.png" alt="">
</div>

لاحظ الخاصيتان width , height بعد تحديد قيمتهما سوف تكون النتيجة هكذا
ثانيا من خلال Css : نعطي العنصر img خاصية width و height كالتالي

.test{
    border: 1px solid #333;
    width: 50vw;
    height: 50vh;
}

img{
    width: 100%;
    height: 100%;
}

سوف تكون النتيجة مشابهة للنتيجة في الأعلى

لحعل حجم الصورة متطابق مع العنصر الأب أو الحاوية يمكنك بكل سهولة إعطاء خاصية 

.img-container{                /* العنصر الأب للصورة*/

	width: 100px;       
	height: 100px;
}

img{
	width: 100%;
	height: 100%;
}

بالنسبة لل 100% فهي تعني القيمة  الكلية للعنصر الأب فلتغيير حجم الصورة يمكنك الأن تغيير حجم العنصر الأب فقط وتبعاً لذلك يتغير حجم الصورة   أما بالنسبة للإرتفاع يفضل عدم تحديده لثبات الصورة علي ال ratio  المناسب للصورة