防止可调整大小的 Flexbox 图像被框或浏览器窗口的边界切断

Question

我正在尝试将一对图像水平并排放置，这样：

无论相对纵横比如何，两个图像都占据大致相同的区域
每个图像垂直适合视口
并排的图像水平适合视口内

我非常接近以下布局，但是当视口具有一定的形状和尺寸时，图像将从页面的左侧和右侧消失。

<!doctype html>
<meta charset=utf-8>
<style>
@import url('reset.css'); /* https://meyerweb.com/eric/tools/css/reset/ */
:root {
    background-color: oklch(95.25% 0.0187 235.01);
}
.diptych-area {
    display: flex;
    width: min(90vh, 100vw);
    height: 90vh;
    margin: auto;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    container-type: size;

    figure {
        &.left {
            display: flex;
            justify-content: end;
            flex-basis: calc((var(--left-aspect-ratio) / (var(--left-aspect-ratio) + var(--right-aspect-ratio))) * 100vw); }
        &.right {
            display: flex;
            justify-content: start;
            flex-basis: calc((var(--right-aspect-ratio) / (var(--left-aspect-ratio) + var(--right-aspect-ratio))) * 100vw); }
        box-sizing: border-box;
        img {
            max-height: 100cqh; } } }

figure {
    flex-basis: content;
    position: relative;
    margin: 0 1rem;
    scroll-snap-align: center;

    & img {
        display: block;
        box-sizing: border-box;
        max-height: 80vh;
        max-width: min(100vh, 100cqw);
        border: 24px solid white; }
</style>

<p>test 1 2 3

<div class=diptych-area style="--left-aspect-ratio: 0.6667; --right-aspect-ratio: 1.5;">
  <figure class=left>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Escaleras_a_la_Catedral_--_2023_--_Burgos%2C_Castilla_y_León%2C_España.jpg/1365px-Escaleras_a_la_Catedral_--_2023_--_Burgos%2C_Castilla_y_León%2C_España.jpg">
  </figure>
  <figure class=right>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Himalayas%2C_Cholatse%2C_Nepal.jpg/1280px-Himalayas%2C_Cholatse%2C_Nepal.jpg">
  </figure>
</div>

<p>test 1 2 3

<div class=diptych-area style="--left-aspect-ratio: 0.6667; --right-aspect-ratio: 0.6667;">
  <figure class=left>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Фрагмент_церкви._Дошки_оббивки.jpg/682px-Фрагмент_церкви._Дошки_оббивки.jpg">
  </figure>
  <figure class=right>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Crack_climbing_in_Indian_Creek%2C_Utah.jpg/681px-Crack_climbing_in_Indian_Creek%2C_Utah.jpg">
  </figure>
</div>

<p>test 1 2 3

<div class=diptych-area style="--left-aspect-ratio: 1.2; --right-aspect-ratio: 0.8;">
  <figure class=left>
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Flussregenpfeifer_im_flachen_Wasser_01.jpg/1219px-Flussregenpfeifer_im_flachen_Wasser_01.jpg"></div>
  </figure>
  <figure class=right>
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Galería_Sciarra%2C_Roma%2C_Italia%2C_2022-09-16%2C_DD_117-119.jpg/818px-Galería_Sciarra%2C_Roma%2C_Italia%2C_2022-09-16%2C_DD_117-119.jpg"></div>
  </figure>
</div>

在这个窗口大小下一切都还好：

但是调整大小时，照片不会变小以满足第三个条件：

我不知道如何让图片根据视口的水平尺寸适当缩小。

Answer 1

我认为你应该尝试使用图像宽度的％，这样每当你的屏幕尺寸减小时，图像就可以适应屏幕的新尺寸。
另一个原因可能是当您缩小屏幕尺寸时，图像的某些部分消失了，因为图像的宽度大于屏幕尺寸的宽度。要解决这个问题，您必须使用响应式媒体查询。

防止可调整大小的 Flexbox 图像被框或浏览器窗口的边界切断

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

1个回答

最新问题

防止可调整大小的 Flexbox 图像被框或浏览器窗口的边界切断

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

1个回答

最新问题

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