如何在不调整父元素大小的情况下将图像放入 div 中，同时又能响应？

Question

这是我的 HTML：

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

这是我的 CSS：

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

用户应该上传图片，我应该在元素中显示它。允许用户上传任何尺寸的图片，所以我想找出一种显示它们的方法。

几个小时以来，我一直在努力解决这个问题，但似乎没有任何效果。我将宽度作为百分比放在

slikawrap

类上，因此它会响应，但这会导致父 div

data

和

dataispod

在我希望它保持不变时调整大小。

Answer 1

您可以尝试使用

background-image

CSS 属性 或

object-fit

CSS 属性 和

contain

的值，以确保它始终适合您的容器。下面的例子：

.bg {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAAKCAYAAAAnx3TwAAAAT0lEQVR42u3XMQEAAAgDINc/9IyhB7Qg03YAAACAUxF0AAAAEHQAAABA0AEAAEDQAQAAAEEHAAAAQQcAAAAEHQAAAAQdAAAAEHQAAAD4ZwHnKh3tbtO8XgAAAABJRU5ErkJggg==);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #eee; /* This is just to illustrate the container size */
  width: 100px;
  height: 100px;
}

.img {
  object-fit: contain;
  background-color: #eee; /* This is just to illustrate the container size */
  width: 100px;
  height: 100px;
}

<div class="bg"></div>
<hr />
<img class="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAAKCAYAAAAnx3TwAAAAT0lEQVR42u3XMQEAAAgDINc/9IyhB7Qg03YAAACAUxF0AAAAEHQAAABA0AEAAEDQAQAAAEEHAAAAQQcAAAAEHQAAAAQdAAAAEHQAAAD4ZwHnKh3tbtO8XgAAAABJRU5ErkJggg==">
<hr />
<div class="bg" style="background-image: url(https://placekitten.com/1000/400); border-radius: 50px"></div>
<hr />
<img class="img" style="border-radius: 50px" src="https://placekitten.com/1000/400">

（数据 URI 中使用的图像大小为 1000px x 10px）