仅用CSS实现固定高度且保比例的动态图片列？兼容IE11吗？

Absolutely, you can replicate this exact image column effect using only CSS—and yes, we can make it work in IE11 too, as long as your images are static (which they likely are for a reveal.js slideshow). Let’s break down how to do this, and why it works.

Core Logic Recap #

First, let’s recap what the original JavaScript was doing:

• Calculated each image’s aspect ratio (naturalWidth/naturalHeight)
• Set flex-grow: 1/aspectRatio on each image, so they’d proportionally fill the fixed-height vertical flex container
• Adjusted the container width to fit the first image’s scaled dimensions

With CSS, we can replicate this behavior without any scripts—we just need to lean into flex layout and image replacement element behavior.

Full CSS Implementation #

Here’s the complete CSS code, including IE11 fixes and reveal.js-friendly adjustments:

/* Base layout matching your original setup */
body {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    min-height: 100vh;
}

section {
    width: 100vh;
    height: 70vh; /* Match your desired slideshow height */
}

.st-container-h {
    display: flex;
    justify-content: space-around;
    height: 100%;
}

.st-flex-v {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

/* Image column core styles */
.st-imagecol {
    display: flex;
    flex-direction: column;
    height: 100%; /* Fixed height to match your slideshow */
    max-width: 650px; /* Optional: limit maximum column width */
}

/* Modern browser styles (cleaner, uses CSS calc) */
.st-imagecol img {
    flex-grow: calc(1 / var(--aspect-ratio));
    height: auto;
    width: auto;
    object-fit: contain; /* Ensures images stay fully visible without distortion */
}

/* Set aspect ratios for each static image (replace with your actual image ratios) */
.st-imagecol img:nth-child(1) { --aspect-ratio: 800/430; }
.st-imagecol img:nth-child(2) { --aspect-ratio: 680/700; }
.st-imagecol img:nth-child(3) { --aspect-ratio: 720/470; }
.st-imagecol img:nth-child(4) { --aspect-ratio: 600/600; }
.st-imagecol img:nth-child(5) { --aspect-ratio: 413/618; }

/* IE11 Compatibility Fix */
/* IE11 doesn't support CSS variables or calc() in flex-grow, so we precompute values */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .st-imagecol img:nth-child(1) { flex-grow: 0.538; } /* 1/(800/430) ≈ 0.538 */
    .st-imagecol img:nth-child(2) { flex-grow: 1.03; }  /* 1/(680/700) ≈ 1.03 */
    .st-imagecol img:nth-child(3) { flex-grow: 0.653; }  /* 1/(720/470) ≈ 0.653 */
    .st-imagecol img:nth-child(4) { flex-grow: 1; }      /* 1/(600/600) = 1 */
    .st-imagecol img:nth-child(5) { flex-grow: 1.497; }  /* 1/(413/618) ≈ 1.497 */
}

/* Keep your original helper styles */
.st-container-h p, .st-container-h h3 {
    background-color: rgba( 0,0,0, 0.2);
    border-radius: 12px;
}
.st-available {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1 !important;
}
.st-container-h > .st-available, .st-flex-h > .st-available {
    width: 1px;
    height: auto;
}
.st-available> * {
    display: block!important;
    margin: 0!important;
}
.st-available-parent > * {
    flex-grow: 0;
}
.st-overflow-auto {
    overflow: auto;
}

How This Works #

1. Flex Container Setup: .st-imagecol is a vertical flex container with a fixed height (matching your slideshow’s height). This forces images to fill the vertical space proportionally.
2. Proportional Height Allocation: Using flex-grow: 1/aspectRatio ensures each image takes up vertical space relative to its width—wider images take less height, taller images take more, just like the original JS.
3. Automatic Width Adaptation: Since images are replacement elements, they automatically maintain their natural aspect ratio. The flex container will automatically adjust its width to fit the widest image in the column, no extra width-setting needed.
4. IE11 Fix: We use a media query targeting IE11 to replace CSS variables and calc() with precomputed flex-grow values. This works because your slideshow images are static—you can calculate these values once when setting up your slides.

Compatibility Notes #

• Modern Browsers: Fully supported without any hacks.
• IE11: Works perfectly for static images (the ideal use case for reveal.js slides). If you needed dynamic images (loaded after page load), you’d need a tiny bit of JS to calculate ratios, but for slideshows, static images are the norm.

Reveal.js Adaptation Tips #

• Set .st-imagecol’s height to 100% to match your slide’s available height.
• Adjust max-width to control how wide the image column can get on larger screens.
• Remove any unnecessary wrapper elements if they conflict with reveal.js’s default layout.

内容的提问来源于stack exchange，提问作者John Kha