时间戳

首页 > 解决方案 > 调整图像大小以适应容器

html - 调整图像大小以适应容器

问题描述

我正在尝试制作一个适合任何访问它的用户的屏幕的 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>

我希望它看起来如何： 在此处输入图像描述

标签： htmlcssbootstrap-4flexbox

解决方案

将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%:
}

推荐阅读