如何使图像的大小不超出其父级？答案

【问题标题】：How can I make images not size outside of its parent?如何使图像的大小不超出其父级？
【发布时间】：2021-08-23 07:22:00
【问题描述】：

我正在尝试在一个站点上创建一个容器。在这个容器内我想要 3 行，每行都有一个图像。图像本身很大，但是我想将图像限制在其父级的大小。即使有大量 h-100 跟踪，渲染时的图像如何接近视口大小的 5 倍。

这是我的进度。

澄清我不希望图像溢出，我需要它们全部缩小以不超出父级

<!-- Bootstrap 4.1.x / Twitter-Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">



<!-- Body -->
<div id="main-container" style="opacity: 0.5;">
  <div class="container-fluid" style="position: fixed; bottom: 7%; height: 70vh;">
    <div class="row h-100">
      <div class="col h-100">
        <div class="row ">
          <img class="rounded-circle img-fluid" width="100%" height="auto" src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579;">
        </div>

        <div class="row ">
          <img class="rounded-circle img-fluid" width="100%" height="auto" src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579;">
        </div>
        <div class="row ">
          <img class="rounded-circle img-fluid" width="100%" height="auto" src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579;">
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： javascript html css twitter-bootstrap

【解决方案1】：

试试这个：

<div class="row h-100">
  <img class="rounded-circle img-fluid" style="max-height: 100%; max-width: 100%;" src="https://www.sepsis.org.nz/wp-content/uploads/placeholder.png" style="border: .2rem solid #1a4579;">
</div>

【讨论】：

这只适用于一张图片，另外两张在它下面。
对，只需附加一个类 'h-100'，它为 div 提供一个高度。并设置样式：'max-height: 100%;最大宽度：100%；'告诉 img 适合它的父节点
欢迎来到 Stack Overflow！虽然这段代码可以解决问题，including an explanation 解决问题的方式和原因确实有助于提高帖子的质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提出问题的人。请edit您的答案添加解释并说明适用的限制和假设。

【解决方案2】：

使用添加此 css 属性以这种方式或外部图像作为您的偏好。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Head-->
<head>
    <style>
        img{
            overflow:hidden;
            object-fit:contain;
        }
    </style>

</head>

<!-- Body -->
<div id="main-container" style="opacity: 0.5;">
  <div class="container-fluid" style="position: fixed; bottom: 7%; height: 70vh;">
    <div class="row h-100">
      <div class="col h-100">
        <div class="row " style="overflow:hidden">
          <img class="rounded-circle img-fluid" width="100%" height="auto" src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579;">
        </div>

        <div class="row ">
          <img class="rounded-circle img-fluid" width="100%" height="auto" src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579;">
        </div>
        <div class="row ">
          <img class="rounded-circle img-fluid" width="100%" height="auto" src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579;">
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

HTML 结构略有变化并添加了 CSS。

#img-wrapper {
  width: 300px; /* or in percentage*/
}

#img-main-row {
  overflow-y: scroll;
}

<!-- Bootstrap 4.1.x / Twitter-Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">



<!-- Body -->
<div id="main-container" style="opacity: 0.5;">
    <div class="container-fluid" style="position: fixed; bottom: 7%; height: 70vh;">
        <div id="img-main-row" class="row h-100">
            <div class="col-12">
                <div class="img-wrapper">
                    <img class="rounded-circle img-fluid" width="100%" height="auto"
                        src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579;">
                </div>
            </div>

            <div class="col-12">
                <div class="img-wrapper">
                    <img class="rounded-circle img-fluid" width="100%" height="auto"
                        src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579;">
                </div>
            </div>
            
            <div class="col-12">
                <div class="img-wrapper">
                    <img class="rounded-circle img-fluid" width="100%" height="auto"
                        src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579;">
                </div>
            </div>

        </div>
    </div>
</div>

【讨论】：

抱歉，我不想让图片溢出。

【解决方案4】：

试试这个：

<head>
    <style>
        .container-fluid .row {
            height: calc(100%/3) !important;
        }
        img {
            max-height: 100%;
            object-fit: cover;
        }
    </style>

</head>

<!-- Body -->
<div id="main-container" style="opacity: 0.5;">
    <div class="container-fluid" style="position: fixed; bottom: 7%; height: 70vh;">
        <div class="row">
            <div class="col">
                <div class="row " style="overflow:hidden">
                    <img class="rounded-circle img-fluid" width="100%" height="auto"
                        src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579;">
                </div>

                <div class="row ">
                    <img class="rounded-circle img-fluid" width="100%" height="auto"
                        src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579;">
                </div>
                <div class="row ">
                    <img class="rounded-circle img-fluid" width="100%" height="auto"
                        src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579;">
                </div>
            </div>
        </div>
    </div>
</div>

【讨论】：

【解决方案5】：

图像的父级（行）没有特定的高度来限制其中的图像。
将图像的最大高度设置为 100%。

试试这个：

<style>
    .imgParent {
        height: 100px;
    }

    img {
        max-height: 100%;
    }
</style>

和

<div class="row imgParent">
     <img class="rounded-circle img-fluid" width="100%" height="auto" src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579;">
</div>

如果您想保持图片的纵横比，请从图片中删除 width="100%" height="auto"。

【讨论】：

【解决方案6】：

我的示例基于这样一个事实，即您希望始终将图像宽度保持在 100% 的最小宽度，如果您不希望这样做，我仍然可以更改它。

流程：

我将 overflow 类添加到包含所有行图像的 .col div 中。

然后目标是使用overflow:hidden 隐藏您的图像高度，然后使用position:absolute 将图像居中如下：

（您可能对 js 使用 position:absolute 有一些问题，请提供工作示例以获取更多信息。）

.overflow{
 overflow:auto;
}
.overflow .row{
  position:relative;
  overflow:hidden;
  height:100%;
}

.overflow img{
  min-width:100%;
  position:absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<!-- Bootstrap 4.1.x / Twitter-Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">



<!-- Body -->
<div id="main-container" style="opacity: 0.5;">
  <div class="container-fluid" style="position: fixed; bottom: 7%; height: 70vh;">
    <div class="row h-100">
      <div class="col h-100 overflow">
        <div class="row">
          <img class="rounded-circle img-fluid" width="100" height="auto" src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579;">
        </div>

        <div class="row ">
          <img class="rounded-circle img-fluid" width="100%" height="auto" src="https://via.placeholder.com/1820x1080.png" style="border: .2rem solid #1a4579;">
        </div>
        <div class="row ">
          <img class="rounded-circle img-fluid" width="100%" height="auto" src="https://via.placeholder.com/1720x1080.png" style="border: .2rem solid #1a4579;">
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

我不希望图像溢出，我需要它们“缩小”以适应被占用的行。
@Joe 这样它们将始终占据整个宽度而不会收缩。但是溢出是保持比例所必需的。从您添加宽度：100 的那一刻起，图像将缩小