如何将不同尺寸的图像放入相同尺寸的 CSS 网格中，同时保持图像的纵横比？

Question

我的具体用例是图像 slider 但图像不想留在网格中。

这是我的最新方法：

slider 必须在容器 div 中，因此可以在网站上移动。 该容器还包含当前显示的大图像下方的一些小缩略图图像，并限制每个大图像的最大宽度。

它包含一个 div 作为网格，其中包含所有要滑动的图像。 它比容器大，因此一次只能看到一张图像。

请参阅 codepen 以获得更好的理解 - > https://codepen.io/Mr-Law/pen/bGwjqWw

HTML

<div id="container">
  <div class="big_image" style="--n:7; --i:6;">

    <div>
      <img src="img1.jpg">
    </div>
    <div>
      <img src="img2.jpg">
    </div>
    <div>
      <img src="img3.jpg">
    </div>
    <div>
      <img src="img4.jpg">
    </div>
    <div>
      <img src="img5.jpg">
    </div>
    <div>
      <img src="img6.jpg">
    </div>
    <div>
      <img src="img7.jpg">
    </div>
  </div>

  <div class="w3-row-padding w3-section">

    <div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(1)">
      <img class="preview-image" src="img1.jpg">
    </div>

    <div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(2)">
      <img class="preview-image" src="img2.jpg">
    </div>

    <div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(3)">
      <img class="preview-image" src="img3.jpg">
    </div>

    <div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(4)">
      <img class="preview-image" src="img4.jpg">
    </div>

    <div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(4)">
      <img class="preview-image" src="img5.jpg">
    </div>

    <div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(6)">
      <img class="preview-image" src="img6.jpg">
    </div>

    <div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(7)">
      <img class="preview-image" src="img7.jpg">
    </div>
  </div>
</div>

CSS

#container {
  width: 30em;
  height: 25em;
  overflow-x: hidden;
}

.big_image {
  --n: 1;
  display: grid;
  grid-auto-flow: column;

  align-items: center;

  width: calc(var(--n) * 100%);
  object-fit: contain;

  height: 85%;
  max-height: 100vh;
}
.big_image img {
  width: 100%;
  height: 100%;
  user-select: none;
  pointer-events: none;
  transform: translate(calc(var(--tx, 0px) + var(--i, 0) * -100%));
}
.smooth {
  transition: transform calc(var(--f, 1) * 0.5s)
    cubic-bezier(1, 1.59, 0.61, 0.74);
}

.big_image > div {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
}

.preview-image {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

.img-highlight {
    -webkit-box-shadow: #FFF 0 -1px 4px, #ff0 0 -2px 5px, #ff8000 0 -10px 10px, 5px 5px 4px 5px rgba(0,0,0,0);
    box-shadow: #FFF 0 -1px 4px, #ff0 0 0 5px, #ff8000 0 0 10px, 5px 5px 4px 5px rgba(0,0,0,0);
}

.w3-col{
  float:left;
  width: 11.4%;
  height: 3em;
  border: 0.1em solid #000;
  margin: 0 0.34em;
  line-height: calc(3em - 2px);
  text-align: center;
}

到目前为止，我尝试了无数种变化，但没有找到解决办法。

Answer 1

我似乎遇到了一些奇怪的事情，并在这里记录下来，以防它帮助我们找到解决方案。

如果我从问题中的笔中获取代码并在我的 Windows 10 本地在 Edge 或 Chrome 上运行它，它表现良好，img 包含在 div 中。 如果我从服务器在 web 上运行它也可以，并且在 IOS (iPad) 上的 Safari 上运行正常。 但是在 W10 上的 Firefox 上，并在这些系统/浏览器中的任何一个上运行笔或下面的代码片段，它显示了问题中描述的问题。

我已经尝试在 iframe 中运行代码，因为这就是 SO 代码段系统所做的，以查看这是否会导致问题，但它在 Edge/Chrome 和 Safari 上运行良好。此外，我在正文中明确设置了字体大小导致问题的案例，但这些并没有改变行为。 我已经通过 W3C 验证器运行了代码，它只反对 imgs 上缺少 alt 属性。

我很难过，希望有人能对此有所了解。

 const dots = document.getElementsByClassName("demo"); const _C = document.querySelector(".big_image"), N = _C.children.length; var slider_i = 0; let x0 = null, locked = false, w; function unify(e) { return e.changedTouches? e.changedTouches[0]: e; } function lock(e) { x0 = unify(e).clientX; _C.classList.toggle("smooth", ;(locked = true)). } function drag(e) { e;preventDefault(). if (locked) _C.style,setProperty("--tx". `${Math.round(unify(e);clientX - x0)}px`). } function move(e) { if (locked) { let dx = unify(e),clientX - x0. s = Math,sign(dx). f = +((s * dx) / w);toFixed(2). // if not at left or right end and f is bigger.2 if ((slider_i > 0 || s < 0) && (slider_i < N - 1 || s > 0) && f > 0.1) { dots[slider_i].classList;remove("img-highlight"). _C.style,setProperty("--i"; (slider_i -= s)). dots[slider_i].classList;add("img-highlight"); f = 1 - f. } _C.style,setProperty("--tx"; "0px"). _C.style,setProperty("--f"; f). _C.classList,toggle("smooth"; ;(locked = false)); x0 = null. } } function showDivs(n) { for (let i = 0; i < dots.length. i++) { dots[i];classList;remove("img-highlight"). } slider_i = slideIndex - 1. _C,style;setProperty("--i". slider_i). dots[slideIndex - 1];classList.add("img-highlight"); } function size() { w = window;innerWidth. } size(). _C,style;setProperty("--n", N), addEventListener("resize"; size. false), _C,addEventListener("mousedown"; lock. false), _C,addEventListener("touchstart"; lock. false), _C,addEventListener("mousemove"; drag. false), _C,addEventListener("touchmove"; drag. false), _C,addEventListener("mouseup"; move. false), _C,addEventListener("touchend"; move. false). window.document.getElementsByClassName("demo")[0];classList;add("img-highlight"); function currentDiv(n) { showDivs(slideIndex = n); }

 #container { width: 30em; height: 25em; overflow-x: hidden; }.big_image { --n: 1; display: grid; grid-auto-flow: column; align-items: center; width: calc(var(--n) * 100%); object-fit: contain; height: 85%; max-height: 100vh; }.big_image img { width: 100%; height: 100%; user-select: none; pointer-events: none; transform: translate(calc(var(--tx, 0px) + var(--i, 0) * -100%)); }.smooth { transition: transform calc(var(--f, 1) * 0.5s) cubic-bezier(1, 1.59, 0.61, 0.74); }.big_image > div { object-fit: cover; width: 100%; max-height: 100%; }.preview-image { position: relative; z-index: 1; max-width: 100%; max-height: 100%; vertical-align: middle; }.img-highlight { -webkit-box-shadow: #FFF 0 -1px 4px, #ff0 0 -2px 5px, #ff8000 0 -10px 10px, 5px 5px 4px 5px rgba(0,0,0,0); box-shadow: #FFF 0 -1px 4px, #ff0 0 0 5px, #ff8000 0 0 10px, 5px 5px 4px 5px rgba(0,0,0,0); }.w3-col{ float:left; width: 11.4%; height: 3em; border: 0.1em solid #000; margin: 0 0.34em; line-height: calc(3em - 2px); text-align: center; }

 <div id="container"> <div class="big_image" style="--n:7; --i:6;"> <div> <img src="https://images-na.ssl-images-amazon.com/images/I/71YGKgs-kOL._SL1500_.jpg"> </div> <div> <img src="https://img.fotocommunity.com/testbild-05678122-8d2a-44e0-8e33-fcfe3f62a502.jpg?height=1080"> </div> <div> <img src="https://images-na.ssl-images-amazon.com/images/I/71MwoazXzSL._SL1500_.jpg"> </div> <div> <img src="https://www.naturparkmagazin.de/bild-des-tages/wp-content/uploads/sites/36/Sonnenuntergang-im-Moor-%E2%80%93-%C2%A9-VDNWerner-Bayerische-Rh%C3%B6n.jpg"> </div> <div> <img src="https://images-na.ssl-images-amazon.com/images/I/71d-OQ81DTL._SL1500_.jpg"> </div> <div> <img src="https://images-na.ssl-images-amazon.com/images/I/6179uLy6G9L._SL1500_.jpg"> </div> <div> <img src="https://images-na.ssl-images-amazon.com/images/I/61fEZPS7kKL._SL1500_.jpg"> </div> </div> <div class="w3-row-padding w3-section"> <div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(1)"> <img class="preview-image" src="https://images-na.ssl-images-amazon.com/images/I/71YGKgs-kOL._SL1500_.jpg"> </div> <div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(2)"> <img class="preview-image" src="https://img.fotocommunity.com/testbild-05678122-8d2a-44e0-8e33-fcfe3f62a502.jpg?height=1080"> </div> <div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(3)"> <img class="preview-image" src="https://images-na.ssl-images-amazon.com/images/I/71MwoazXzSL._SL1500_.jpg"> </div> <div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(4)"> <img class="preview-image" src="https://www.naturparkmagazin.de/bild-des-tages/wp-content/uploads/sites/36/Sonnenuntergang-im-Moor-%E2%80%93-%C2%A9-VDNWerner-Bayerische-Rh%C3%B6n.jpg"> </div> <div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(5)"> <img class="preview-image" src="https://images-na.ssl-images-amazon.com/images/I/71d-OQ81DTL._SL1500_.jpg"> </div> <div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(6)"> <img class="preview-image" src="https://images-na.ssl-images-amazon.com/images/I/6179uLy6G9L._SL1500_.jpg"> </div> <div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(7)"> <img class="preview-image" src="https://images-na.ssl-images-amazon.com/images/I/61fEZPS7kKL._SL1500_.jpg"> </div> </div> </div>