Css 图像占用尽可能多的空间但保持宽高比并包含在窗口高度中

发布于12月09日

我有一个两栏的布局.左图中有一张图片.右图中有两幅图像叠加在一起.我的目标是让图像尽可能地增加，但必须保持它们的纵横比.当然，不能溢出到容纳高度之外.

现在，如果您更改浏览器窗口的宽度，图像将以正确的方式相应地调整大小.但如果减小窗口的高度，图像的大小不会减小.

任何小费. outer-container有高度计算(outer-containervh-outer-containerpx).它应该模拟具有粘性页脚的情况.

.outer-container {
  display: flex;
  background-color: green;
  height: calc(100vh - 100px);
  clear: auto;
}
.left-column {
  
}
.right-column {
  display:flex;
  justify-content: top;
  flex-direction: column;
}
.left-image {
  width: 100%;
}

.right-image {
  width: 100%;
}
/* Currently using image tag but meant to work with video as well, easier to create a snippet for img though!*/

<div class="outer-container">
  <div class="left-column">
    <img class="left-image" src="https://via.placeholder.com/200x500/333300">
  </div>
  
  <div class="right-column">
    <img class="right-image" src="https://via.placeholder.com/500X250/33000">
    <img class="right-image" src="https://via.placeholder.com/500x250/003300">
    </image>
  </div>
</div>

.outer-container { display: flex; background-color: green; height: calc(100vh - 100px); clear: auto; } .left-column { } .right-column { display:flex; justify-content: top; flex-direction: column; } .left-image { width: 100%; max-height: 100%; } .right-image { width: 100%; max-height: 50%; } /* Currently using image tag but meant to work with video as well, easier to create a snippet for img though!*/

<div class="outer-container"> <div class="left-column"> <img class="left-image" src="https://via.placeholder.com/200x500/333300"> </div> <div class="right-column"> <img class="right-image" src="https://via.placeholder.com/500X250/33000"> <img class="right-image" src="https://via.placeholder.com/500x250/003300"> </image> </div> </div>

Css 图像占用尽可能多的空间但保持宽高比并包含在窗口高度中

推荐答案

Css相关问答推荐

无法瞄准元素

通过使溢出的子元素具有其宽度的100%来防止Flex元素溢出

将CSS更改为Mat-Form-Field，其中包含搜索框

显示Reaction组件上的问题.使用FlexBox时的意外大小

禁用MUI DataGrid上的悬停效果

如何有条件地设置元素的字体大小，只有在未明确设置父字体大小(即字体大小为继承)的情况下？

使用带有 fr 单位的 calc 函数

AngularJS Graphs & Charts - 实线和虚线的混合

圆形加载动画

边界半径不起作用

如何使表格中一行的最后一个单元格占据所有剩余宽度

如何设置表格单元格的最大高度？

如何在 CSS 中覆盖图像？

使用 CSS/HTML 更改悬停图像

使用边距：0 自动；在 Internet Explorer 8 中

更改 FontAwesome 图标的字体粗细？

可变高度的 CSS 浮动 div

是否可以在 CSS 中定义常量？

可见性：隐藏 vs 显示：无 vs 不透明度：0

html元素(div)的全高，包括边框，填充和边距？