子图像（以 px 为单位的高度、宽度动态）适合父 div

Question

我的问题是子图像元素必须适合父 div，但图像的高度和宽度是动态设置的。

.people-image-right-parent { height: 150px; width: 150px;background: #EAEAEA; overflow: auto; }
.people-image-right{    width: 220px;
    object-fit: contain;
    height: 220px;
    background: url(http://ndl.mgccw.com/mu3/000/488/937/sss/68ad9b3f576e42399021560560fb3a16_small.png) -491px -235px;}

<div class="people-image-right-parent">
    <img class="people-image-right"  />
</div>

图像的高度和宽度是动态的，不是固定的，应该以像素 (px) 为单位。我不希望图像可滚动或隐藏。它必须适合父元素或必须包含在父元素中。

请指导我如何使图像适合其父 div。

提前致谢。

Answer 1

试试这个

.people-image-right-parent {
  height: 150px;
  width: 150px;
  background: #EAEAEA;
  overflow: hidden;
}

.people-image-right {
  width: 100%;
  object-fit: contain;
  height: 100%;
  background: url(http://ndl.mgccw.com/mu3/000/488/937/sss/68ad9b3f576e42399021560560fb3a16_small.png) -491px -235px;
}

<div class="people-image-right-parent">
  <img class="people-image-right" class="" />
</div>

Answer 2

这就是你要找的吗？

.people-image-right-parent {
    height: 150px;
    width: 150px;
    background: #EAEAEA;
    overflow: hidden; /* If needed you can change this
                      value to "scroll" or "visible". */
}
.people-image-right{
    height: inherit; /* If needed you can change these */
    width: inherit;  /* values to pixel values. */
    object-fit: cover;
    margin: 0;
}

<div class="people-image-right-parent">
    <img class="people-image-right" src="http://ndl.mgccw.com/mu3/000/488/937/sss/68ad9b3f576e42399021560560fb3a16_small.png" />
</div>

Answer 3

这里试试这个

1. 如果你的图片比你的 div 低（以 PX 为单位），你必须使用 min-width:100% & min-height:100%;

2. 如果你的图片比你的 div 高（以 PX 为单位），你必须使用 max-width:100% & max-height:100%;

这是示例，您的图像高于或低于父 div，它应该适合父 div。

.people-image-right-parent {
    height: 150px;
    width: 150px;
    background: #EAEAEA;
    
}
.people-image-right{
    height: 350px;
    width: 345px;
    max-width:100%;
    max-height:100%;
    min-width:100%;
    min-height:100%;
    margin: 0;
}

<div class="people-image-right-parent">
    <img class="people-image-right" src="http://ndl.mgccw.com/mu3/000/488/937/sss/68ad9b3f576e42399021560560fb3a16_small.png" />
</div>

Answer 4

我不知道修改 html 是否是一种选择，但是...

在父 div 中使用 img 标签会更好

在下面的示例中，图像是完全动态的，无论纵横比如何，它们都会调整以适应 div。它也永远不会拉伸图像。

.people-image-right-parent {
  display: inline-block;
  width: 150px;
  height: 150px;
  background: darkred;
  line-height: 150px; /* should match your div height */
  text-align: center;
  font-size: 0;
}

img.people-image-right {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}

<div class="people-image-right-parent">
  <img class="people-image-right" src="https://unsplash.it/300/300">
</div>

<div class="people-image-right-parent">
  <img class="people-image-right" src="https://unsplash.it/100/300">
</div>

<div class="people-image-right-parent">
  <img class="people-image-right" src="https://unsplash.it/300/100">
</div>

---

编辑：

如果您可以设置内联 img 的高度和宽度 - 即使它是动态生成的 - 但无法控制其他任何内容，请参见下面的示例。只要在 img 标签中以 px 声明宽度和高度，无论是手动还是动态完成，这将起作用。

.people-image-right-parent {
  display: inline-block;
  width: 150px;
  height: 150px;
  background: darkred;
  line-height: 150px; /* should match your div height */
  text-align: center;
  font-size: 0;
}
/* demonstration backgrounds */
.bg1 {background: url(https://unsplash.it/500/400);}
.bg2 {background: url(https://unsplash.it/200/600);}
.bg3 {background: url(https://unsplash.it/900/300);}

.people-image-right {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
  background-size: contain;
  background-position: center;
  background-repeat:no-repeat;
}

<div class="people-image-right-parent">
  <img class="people-image-right bg1" style="width:300px ;height:300px">
</div>

<div class="people-image-right-parent">
  <img class="people-image-right bg2" style="width:100px ;height:300px">
</div>

<div class="people-image-right-parent">
  <img class="people-image-right bg3" style="width:300px ;height:100px">
</div>