изображение не соответствует родительскому элементу

Question

изображение не соответствует родительскому элементу вот полный код 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

Если вы не установите какую-либо определенную ширину ни в теге CSS, ни в теге <img>, изображение будет отображаться в полном размере независимо от его контейнера. Это твоя проблема. Таким образом, вам нужно убедиться, что изображение составляет максимум 100% от ширины его родительского элемента.

HTML только

<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>

Лучше всего делать это с помощью CSS, а не напрямую в HTML, но вы не указали CSS в своем вопросе.

A CSS пример ниже:

CSS пример

.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

Это должно работать и является динамическим c:

Это дает изображению унаследованные ширину и высоту, что означает, что оно копирует ширину предыдущего объекта. Выдается со свойством 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>

Надеюсь, это поможет!

Answer 3

Прежде всего! ваше написание класс неверно, поэтому изображение не подходит. Сделайте ширину изображения равной 100% , а его высоту - автоматически , чтобы оно не растягивалось, но тогда ваше изображение может выйти из родительского контейнера, сделайте там переполнение: скрыто

.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>