html - 如何将不同大小的图像放入相同大小的 CSS 网格中,同时保持图像的纵横比?
问题描述
我的具体用例是图像滑块,但图像不想留在网格中。
这是我的最新方法:
滑块必须在容器 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;
}
到目前为止,我尝试了无数种变化,但没有找到解决办法。
解决方案
我似乎遇到了一些奇怪的事情,并在这里记录下来,以防它帮助我们找到解决方案。
如果我从问题中的笔中获取代码并在我的 Windows 10 本地 Edge 或 Chrome 上运行它,它的表现很好,img 包含在 div 中。如果我从服务器在网络上运行它也可以,并且可以在 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>
推荐阅读
- selenium - 在 selenium 中查找文本的颜色
- azure - 在 Powershell 中获取 Azure 函数的 IP
- c# - 如何将带有 %20 的文件路径作为参数传递给进程?
- reactjs - 在 useEffect 中获取更新的数据
- c++ - heapify-up C++ 后无法打印数组中元素的位置
- r - 使用两列删除另一个数据框中存在的行
- react-native - React Native SVG Mask子不转换
- c - @zero_extendqisi2 的含义
- spring-boot - spring-data-jdbc - 为什么我得到 DbActionExecutionException 而不是 DuplicateKeyException
- linux - 字符串的正确转义策略