Это неверно.
Разбираемся с vertical-align
А нужно для того, чтобы не было пробела после картинок.
Если вы посмотрите мою песочницу, то увидите, что я эти свойства задаю картинке, а не итему.
По идее должно быть достаточно пропорций у блоков с картинками.
Если почему-то нет и нужно прямо ему задавать aspect-ratio, ...
...заменить его на псевдо от большого блока и убрать рамки.
Небольшая игрушка по гридам: https://cssgridgarden.com/#ru
img {
width: 100%;
}
grid-auto-rows: auto;
grid-auto-columns: auto;align-self: start;
grid-template-columns: calc(42%-15px) calc(19%-15px) calc(22%-15px) 17%;import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { MotionPathPlugin } from "gsap/MotionPathPlugin";
gsap.registerPlugin(ScrollTrigger);
gsap.registerPlugin(MotionPathPlugin);
const myPath = document.querySelector(".flying-obj__path");
const dove = document.querySelector(".flying-obj__dove");
const tl = gsap.timeline({
scrollTrigger: {
trigger: dove,
start: "top 50%",
end: "top",
scrub: 1,
},
});
tl.to(dove, {
duration: 5,
opacity: 0.5,
motionPath: {
path: myPath,
align: myPath,
alignOrigin: [0.5, 0.5],
// autoRotate: true,
},
}).to(dove, {
duration: 3,
opacity: 0,
y: "-100px"
});
let lastScrollTop = 0;
window.addEventListener("scroll", () => {
let st = window.pageYOffset || document.documentElement.scrollTop;
if (st > lastScrollTop){
console.log('downscroll');
dove.style.transform = "scaleX(1)";
} else {
console.log('upscroll');
dove.style.transform = "scaleX(-1)";
}
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);