Из дива вылезает картинка, как это поправить?

Question

[Вадим Жолудев]

т.е. раньше, картинку я вставлял через css url(), решил вставить через html (img src), и она вся вылезла наружу.
Это первоначальный вариант, когда все работало хорошо

<div class="parent">
    <a href="#" class="link1">
      <div class="div1">
       </div>
    </a>
    <a href="#" class="link2">
    <div class="div2"> </div>
  </a>
    <a href="#" class="link3">
    <div class="div3"> </div>
  </a>

    <a href="#" class="link4">
    <div class="div4"> Доставка </div>
  </a>

    <a href="#" class="link5">
    <div class="div5"> </div>
  </a>
  </div>

.parent {

   max-width: 940px;
   width:100%;
   height: 90vh;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(4, 1fr);
   grid-gap: 17px;
    margin-left: 15%;
    margin-top: 9%;
 }


 .link1{
   grid-area: 1 / 1 / 5 / 2;
background-image: url(../images/sand.jpg);
   background-size:cover;
 }

 .link2 {
   grid-area: 1 / 2 / 3 / 3;
   background-image: url(../images/stone1.jpg);
   background-size:cover;

 }

 .link3 {
   grid-area: 3 / 2 / 5 / 3;
   background-image: url(../images/stone3.jpg);
   background-size:cover;

 }

 .link4 {
   grid-area: 1 / 3 / 2 / 4;
   background-image: url(../images/fon2.jpg);
   background-size:cover;
  text-decoration: none;
 }
 .link5 {
   grid-area: 2 / 3 / 5 / 4;
   background-image: url(../images/car1.jpg);
   background-size:cover;

 }

 .link1,
 .link2,
 .link3,
 .link4,
 .link5 {
   border-radius: 30px;
 }
.parent a{
display: grid;
}
.div4{
  color: #fff;
  font-size: 35px;
  font-weight: normal;
  line-height: 60px;
  margin: 35px 0 20px;
  text-transform: uppercase;
  text-shadow:0 2px 3px rgba(0,0,0,0.2), margin: 10px 0 24px;
  text-align: center;
}

Это вариант, после того, как я переместил картинку из html в css
Когд тот же самый, просто картинку переместил и эта картинка вылезла за див на всю страницу

<div class="parent">
    <a href="#" class="link1">
      <div class="div1">
        <img src="../images/sand.jpg" alt="" class="test11">
       </div>
    </a>
    <a href="#" class="link2">
    <div class="div2"> </div>
  </a>
    <a href="#" class="link3">
    <div class="div3"> </div>
  </a>

    <a href="#" class="link4">
    <div class="div4"> Доставка </div>
  </a>

    <a href="#" class="link5">
    <div class="div5"> </div>
  </a>
  </div>

.parent {

   max-width: 940px;
   width:100%;
   height: 90vh;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(4, 1fr);
   grid-gap: 17px;
    margin-left: 15%;
    margin-top: 9%;
 }


 .link1{
   grid-area: 1 / 1 / 5 / 2;
   background-size:cover;
 }

Answer 1

[Анатолий Куликов]

Эффект в том, что нам нужно сделать так, чтобы изображение никогда не было шире родителя:

img {
  max-width: 100%;
}

Только пропишите правила более точно, используя вложенностью.

Answer 2

[Elena Fire]

Есть еще волшебное свойство object-fit: contain;

Answer 3

[Oleg Smychenko]

То есть, никого не смутило, что div внутри a , а не наоборот?
В ссылку блоки не вставляются, потому она - строчный элемент.
Читаем здесь - Правила вложений для тега a и будет вам счастье!