图像不适合父元素

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"> <a href="#"> Read more &rarr;</a> </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"> <a href="#"> Read more &rarr;</a> </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"> <a href="#"> Read more &rarr;</a> </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"> <a href="#"> Read more &rarr;</a> </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"> <a href="#"> Read more &rarr;</a> </div> </div> </div> </section>

Hope this helps!