How do I fit an image inside a div without it resizing the parent element, but also being responsive?

Question

This is the HTML I have:

<div class="data">
<div class="dataispod">
<div class = "detaljilevo">
    <div class="detaljilevosub">
        <h1 class="naslovdetalji"><?=$podaci->naziv?></h1>

        <h4 class="kategorijadetalji"><span><?=$podaci->nazivKategorije?> zadatak • Neizvršen</span></h4>

        <h4 class="opisdetalji"><?=$podaci->opis?></h4>

        <h5 class="datum">Datum kreiranja: <?=$noviDatumKreiranja?></h5>
    </div>

    <div id="buttonwrapperdetalji">
        <button type="submit" class="dugmedetalji" name="button" onclick="izvrsiZadatak();"><span class="puntekst">Izvrši zadatak</span><span class="krataktekst">Izvrši</span></button>
        <form action="izmeni.php">
        <button type="submit" class="dugmedetalji" name="button2" onclick="izmeni();"><span class="puntekst">Izmeni zadatak</span><span class="krataktekst">Izmeni</span></button>
        </form>
    </div>
</div>

<div class="slikacontainer">
    <div class="slikawrap">
        <img src="../slike/<?=$podaci->slika?>"/>
    </div>
</div>
</div>
</div>

This is the CSS I have:

.data {
    margin: 80px 60px 0px 80px;
    position: relative;
    background-color: #BEBDC3;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 400px;
    width: 70%;
}

.dataispod {
    background-color: #ffffff;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    width: 100%;
}

.detaljilevo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: green;
    height: 400px;
    width: 50%;
}

.detaljilevosub {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.slikacontainer {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 50%;
    background-color: rebeccapurple;
}

.slikawrap {
    height: 60%;
    width: 60%;
    display: flex;
    justify-content:center;
    align-items:center;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 5px 5px 20px #555555;
}

.slikawrap img {
    border-radius: 5px;
    overflow:hidden;
}

The user is supposed to upload the picture and I'm supposed to display it in the element. The user is allowed to upload pictures of any dimensions, so I'm trying to figure out a way to display them.

I've been trying to figure this out for hours but nothing seems to be working. I put the width as percentage on the slikawrap class so it would be responsive, but that causes the parent div data and dataispod to resize when I want it to stay the same.

Answer 1

You can try to make use of background-image CSS property or object-fit CSS property with the value of contain to ensure it always fit inside your container. Example below:

(The example includes filter property to allow setting border-radius in the contain-ed image)

/* Wrapper is optional, it is just to illustrate the container size */
.wrap {
  background-color: #eee;
  width: 100px;
  height: 100px;
}

.bg {
  background-image: url(https://placekitten.com/1000/400);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100px;
  height: 100px;
  filter: url('#filter-radius');
}

.img {
  object-fit: contain;
  width: 100px;
  height: 100px;
  filter: url('#filter-radius');
}

<div class="wrap"><div class="bg"></div></div>
<hr />
<div class="wrap">
  <img class="img" src="https://placekitten.com/1000/400" />
</div>

<!-- Magic for border radius -->
<svg style="visibility: hidden" width="0" height="0">
  <defs>
    <filter id="filter-radius">
      <!-- Create a blur of 4px radius from the original image -->
      <!-- (Transparent pixels are ignored, thus the blur radius starts at the corner of the image) -->
      <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur" />
      <!-- Filter out the pixels where alpha values that are too low, in this case the blurred corners are filtered out -->
      <feColorMatrix
        in="blur"
        mode="matrix"
        values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 100 -50"
        result="mask"
      />
      <!-- As the final result is now blurred, we need to use the mask we obtained from previous step to cut from the original source -->
      <feComposite in="SourceGraphic" in2="mask" operator="atop" />
    </filter>
  </defs>
</svg>