Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

提前致谢。

Answer 1

尝试这个

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这是你在找什么？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我不知道修改html是否是一个选项，但是......

您最好在父img

中使用div标记

在下面的示例中，图像是完全动态的，无论宽高比是多少，都会调整以适应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>

Answer 4

在这里试试这个

如果您的图像比您的div低（在PX中），则必须使用最小宽度：100％＆amp;最小高度：100％;
如果你的图像比你的图像更高（在PX中），你必须使用max-width：100％＆amp;最大高度：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>

子图像（高度，动态px宽度）适合父div

4 个答案: