调整图像大小以适合容器内

Question

我正在尝试制作4个面板的屏幕，以适合任何访问它的用户的屏幕。图像将其他所有内容从围绕它们的div中推出。我不希望它溢出。

我的代码：

<div class="d-flex flex-row flex-wrap h-100">
  <div class="d-flex" style="flex-basis: 50%;">
    <img class=" " src="https://docplayer.org/docs-images/22/1321497/images/61-0.png">
  </div>
  <div class="d-flex" style="flex-basis: 50%;">
    <img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1">
  </div>
  <div class="d-flex" style="flex-basis: 50%;">
    <img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1">
  </div>
  <div class="d-flex" style="flex-basis: 50%;">
    <img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1">
  </div>
</div>

我希望它看起来如何：

Answer 1

在图像中添加CSS应该可以解决问题

max-width: 100%;

https://codepen.io/genesy/pen/YzXGXXb在这里有效。相同的代码

编辑：如果您也想要相等的图像尺寸，请将其变成网格

<div class="wrapper">
  <div class="panel">
    <img class=" " src="https://docplayer.org/docs-images/22/1321497/images/61-0.png">
  </div>
  <div class="panel">
    <img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1">
  </div>
  <div class="panel">
    <img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1">
  </div>
  <div class="panel">
    <img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1">
  </div>
</div>

.wrapper {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  width: 100%;
}
.panel {
  width: 100%;
  height: 100%;
}
img {
  max-width: 100%;
  max-height: 100%;
  width:
}
html, body {
  height: 100%;
  width: 100%:
}

Answer 2

为此使用CSS网格：

.container{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
}

img{
  height: 300px;
}

<div class="container">
  <div class="">
    <img class="" src="https://docplayer.org/docs-images/22/1321497/images/61-0.png">
  </div>
  <div class="">
    <img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1">
  </div>
  <div class="">
    <img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1">
  </div>
  <div class="">
    <img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1">
  </div>
</div>

Answer 3

如果您使用的是Bootstrap4，则无需按照附件图像结构编写一行CSS代码。因此，请在html下面借助BS4预定义类进行操作。

将vh-100类用于视口高度100％。
使用h-100中的row类继承父级高度。
在no-gutters类中使用row消除差距。
对于每个设置为50％的列高度，请使用h-50类。
在图像上使用img-fluid mh-100进行响应。

文档：https://getbootstrap.com/docs/4.3/utilities/sizing/#relative-to-the-parent

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container-fluid px-0 vh-100">
  <div class="row no-gutters h-100">
    <div class="col-6 h-50">
      <img src="https://docplayer.org/docs-images/22/1321497/images/61-0.png" class="img-fluid mh-100">
    </div>
    <div class="col-6 h-50">
      <img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1" class="img-fluid mh-100">
    </div>
    <div class="col-6 h-50">
      <img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1" class="img-fluid mh-100">
    </div>
    <div class="col-6 h-50">
      <img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1" class="img-fluid mh-100">
    </div>
  </div>
</div>