如何使弹性框列保持 100% 高度，无论其中图像的宽度如何？

Question

我是 html css 的初学者。我正在尝试制作一个包含 3 列 div 的基本 html css 页面。其中 2 个宽度各为 40%，其中一个仅用于按钮或文本，因此宽度为 15-20%。所有内容的总高度不应超过 100vh（即不滚动）。图像中的粗略布局。

第一列将包含不同纵横比的单个图像。图像需要锚定在第一列的左侧，高度可调。（另外，我知道如果我有一个垂直图像就可以了，但是如果我有一个水平图像我不知道该怎么办，所以任何帮助也都会很棒）

第二列将在列视图中保存 2 个图像，现在彼此之间有边框/边距/填充（即第二列图像之间没有边框）。它们在显示时需要具有相同的宽度，并且高度只需为页面大小的 100%。这就是问题所在，要么图像采用不同的尺寸并显示得很奇怪，要么它们不符合其纵横比（即拉伸或倾斜），或者如果我尝试同时实现这两个目标，它们只会填充整个 40 % 宽度并垂直走出页面。如何调整 div 或弹性框或 img 标签的大小以保持比例和响应能力？

这是 html 代码，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Test Move Object</title>

    <script type="text/javascript" src="../frontend/index.js"></script>
    <link rel="stylesheet" type="text/css" rel="noopener" target="_blank" href="../frontend/index.css">
  </head>

  <body onload="docReady()" onkeydown="" onkeyup="" >
  <div class="container1" >
    <div class="container2" style="flex: 1.5 1 auto; padding: 0;">
      <div style="">
        <img id="image2" src="../frontend/testimg.jpg" alt="Main Image" >
        <!-- <img id="image1" src="../frontend/Red_line.png" > -->
      </div>
      
      <div class="container3" style="flex: 1 1 auto;" >
        <div style="flex: 1 1 auto;"><img id="croppedimg1" src="../frontend/croppedtemp.jpg" alt=""></div>
        <div style="flex: 1 1 auto;"><img id="croppedimg2" src="../frontend/cropped.jpg" alt=""></div>
      </div>
    </div>
    <div style="width: 15%; flex: 0.3 1 auto;">
      <h3 id="speed">Speed Placer</h3>
      <h3 id="test1">Test Placer</h3>
    </div>
  </div>
  </body>
</html>

这是CSS，

body, html {
    overflow: hidden;
    max-height: 100vh;
    height: 100vh;
    width: 100vw;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: 0;
}

.container1 {
    height: 100%;
    display: flex;
    justify-content: space-between;
}

.container1 div {
    
    padding: 10px;
    
}

.container2 {
    display: flex;
    justify-content:flex-start;
    
}

.container3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    object-fit: cover;
    width: fit-content;
    height: 100%;
}

.container3 div {
    height: fit-content;
    /* width: 100%;  */
    padding: 0;
    object-fit: contain;
}

.container3 div img {
    /* height: 50%; */
    width: 100%;
    
}

img {
    /* position: relative; */
    height: 100%;

}

#image1 {
    height: 1px;
    position: absolute;
    width: inherit;
    top: 5px;
    left: 5px;
    
}

h3 {
    width: 20vw;
}

如果我更改第二列图像 div 和 img css，即

.container3 div {
    height: 50%;
    padding: 0;
    object-fit: cover;
}

.container3 div img {
    width: fit-content;    
}

然后它适合 100% 高度的图像，但是，

不同宽度的获取，
底部图像底部的填充消失了。

我认为如果我可以将第二列弹性盒调整到 100% 高度，它可能会起作用，但作为另一个弹性盒的一部分，它会调整它的宽度，因此高度会比我们需要的更大。另外，我不确定放置这么多弹性盒是否完全是一个错误。

我通过将两个图像发送到服务器端，将它们拼接在一起并在此处显示单个图像来解决此问题，但我需要更快，而服务器端的事情会减慢速度。

Answer 1

您可能希望自动裁剪图像以填充可用空间？使用

object-fit: cover

？

html, body {
  height: 100%;
}
body {
  margin: 0;
  display: grid;
  grid-template-columns: 40% 40% 20%;
  grid-template-rows: 50% 50%;
  grid-template-areas:
    "image1 image2 sidebar"
    "image1 image3 sidebar";
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.i1 {
  grid-area: image1;
}
.i2 {
  grid-area: image2;
}
.i3 {
  grid-area: image3;
}
.d1 {
  grid-area: sidebar;
  padding: 1em;
  background: aliceblue;
}

<img class="i1" src="http://picsum.photos/800/1600">
<img class="i2" src="http://picsum.photos/800">
<img class="i3" src="http://picsum.photos/810">

<div class="d1">
Text<br>
Buttons
</div>

如何使弹性框列保持 100% 高度，无论其中图像的宽度如何？

问题描述投票：0回答：1

1个回答

最新问题

如何使弹性框列保持 100% 高度，无论其中图像的宽度如何？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1