image doesnt fit parent element - html

Question

image doesnt fit parent element
here is the full code
https://jsfiddle.net/601q9j7c/1/
<section class="cards">
<div class="card">
<div class="img-data">
<div clas="bgimg"> <img src="https://cdn.pixabay.com/photo/2015/01/10/16/45/home-office-595476_960_720.jpg" alt=""> </div>
<div class="cardDetails">
<span class="date"><i class="fas fa-calendar-alt"></i> March 30, 2020 </span>
</div>
</div>
<div class="post-data">
<h1 class="title">Vuestic – Free Vue Admin Template</h1>
<p class="description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium ullam ratione id nihil quis officia voluptas vitae molestiae provident natus exercitationem, praesentium maiores quo quas ducimus. Voluptatibus debitis ea perferendis?</p>
<div class="cta">
Read more →
</div>
</div>
</div>
</section>

Answer 1

If you don't set any defined width in either the CSS or the <img> tag, the image will be displayed at full size regardless of its container. This is your issue. So you need to ensure the image is at maximum 100% of it's parent's width.
HTML only
<section class="cards">
<div class="card">
<div class="img-data">
<div clas="bgimg"> <img src="https://cdn.pixabay.com/photo/2015/01/10/16/45/home-office-595476_960_720.jpg" alt="" width="100%"> </div>
<div class="cardDetails">
<span class="date"><i class="fas fa-calendar-alt"></i> March 30, 2020 </span>
</div>
</div>
<div class="post-data">
<h1 class="title">Vuestic – Free Vue Admin Template</h1>
<p class="description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium ullam ratione id nihil quis officia voluptas vitae molestiae provident natus exercitationem, praesentium maiores quo quas ducimus. Voluptatibus debitis ea perferendis?</p>
<div class="cta">
Read more →
</div>
</div>
</div>
</section>
It is best practise to do this with CSS rather than directly into HTML, but you have not shown any CSS in your question.
A CSS example is below:
CSS example
.bgimg > img {
max-width: 100%;
width: 100%;
height:auto;
}
<section class="cards">
<div class="card">
<div class="img-data">
<div class="bgimg"> <img src="https://cdn.pixabay.com/photo/2015/01/10/16/45/home-office-595476_960_720.jpg" alt=""> </div>
<div class="cardDetails">
<span class="date"><i class="fas fa-calendar-alt"></i> March 30, 2020 </span>
</div>
</div>
<div class="post-data">
<h1 class="title">Vuestic – Free Vue Admin Template</h1>
<p class="description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium ullam ratione id nihil quis officia voluptas vitae molestiae provident natus exercitationem, praesentium maiores quo quas ducimus. Voluptatibus debitis ea perferendis?</p>
<div class="cta">
Read more →
</div>
</div>
</div>
</section>

Answer 2

First of all ! your spelling your class is wrong, that's why image is not fitting.
Make the width of the image to be 100% and its height is auto so that is don't stretch but then your image may be come out of parent container make there overflow:hidden
.cards {
display: flex;
justify-content: center;
}
.card {
width: 60%;
justify-content: center;
display: grid;
grid-template-columns: 50% 50%;
box-shadow: 10px 0px 20px rgba(0,0,0,0.08);
height: 25rem;
}
.img-data {
height: 100%;
z-index: 1;
background-color: salmon;
display: grid;
grid-template-rows: 50% 50%;
}
.bgimg {
overflow: hidden;
}
.bgimg img {
height: auto;
width: 100%;
}
<section class="cards">
<div class="card">
<div class="img-data">
<div class="bgimg"> <img src="https://cdn.pixabay.com/photo/2015/01/10/16/45/home-office-595476_960_720.jpg" alt=""> </div>
<div class="cardDetails">
<span class="date"><i class="fas fa-calendar-alt"></i> March 30, 2020 </span>
</div>
</div>
<div class="post-data">
<h1 class="title">Vuestic – Free Vue Admin Template</h1>
<p class="description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium ullam ratione id nihil quis officia voluptas vitae molestiae provident natus exercitationem, praesentium maiores quo quas ducimus. Voluptatibus debitis ea perferendis?</p>
<div class="cta">
Read more →
</div>
</div>
</div>
</section>

Answer 3

This should work and is dynamic:
This gives the image an inherited width and height, which means that it replicates the width of the previous object. It is given with the property style="width: inherit; height: inherit;"
.bgimg {
width: 500px; /*Or whatever you want...*/
}
/* this CSS can be directly inserted in a tag with style="width: 500px;"*/
<section class="cards">
<div class="card">
<div class="img-data">
<div class="bgimg"><!--*NOTE: you wrote <div clas="bgimg">(you missed an 's')--><img src="https://cdn.pixabay.com/photo/2015/01/10/16/45/home-office-595476_960_720.jpg" alt="" style="width: inherit; height: inherit;"> </div>
<div class="cardDetails">
<span class="date"><i class="fas fa-calendar-alt"></i> March 30, 2020 </span>
</div>
</div>
<div class="post-data">
<h1 class="title">Vuestic – Free Vue Admin Template</h1>
<p class="description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium ullam ratione id nihil quis officia voluptas vitae molestiae provident natus exercitationem, praesentium maiores quo quas ducimus. Voluptatibus debitis ea perferendis?</p>
<div class="cta">
Read more →
</div>
</div>
</div>
</section>
Hope this helps!