css 如何在不调整父元素大小的情况下将图像放入div中，而且还具有响应性？

bis0qfac 于 2023-05-02 发布在其他

关注(0)|答案(1)|浏览(130)

这是我的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在我希望它保持不变时调整大小。

css

来源：https://stackoverflow.com/questions/76106576/how-do-i-fit-an-image-inside-a-div-without-it-resizing-the-parent-element-but-a

1条答案

按热度按时间

jv4diomz1#

您可以尝试使用background-image CSS property或object-fit CSS property，其值为contain，以确保它始终适合您的容器。示例如下：
(The示例包括filter属性，以允许在contain-艾德图像中设置border-radius）

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

赞(0）回复(0）举报 2023-05-02

我来回答

css 如何在不调整父元素大小的情况下将图像放入div中，而且还具有响应性？

1条答案

相关问题

热门标签

最新问答