Как сделать так, чтобы 1 картинка была идиально ровно под другой
мне нужно, чтобы выделенные красным части были равными. Это редактор фото и я не могу предсказать размер фото, что не даёт мне банально указать отступы. Ожидаемый результат: превью (полное непрозрачное изображение) было идеально по центру обрезанного

Вот код:
/ Группа, где есть фото обрезанное и полное
#groupBigPreview {
display: flex;
align-items: center;
// Отображение урезанного экрана
.addImgBannerInp {
width: 622px;
height: 320px;
position: absolute;
margin-top: 35px;
display: flex;
align-items: center;
z-index: 5;
// border: 2px solid black;
background-color: #C4C4C4;
background-size: cover;
background-position: center;
color: #535353;
p {
position: relative;
left: 225px;
}
}
// Фото, которое будет отображать всё изображение при редактировании
#previewImg {
// Настройки фотографии
background-size: contain;
background-repeat: no-repeat;
border: none;
border-radius: 0px;
pointer-events: none;
// Непрозрачность фонового изображения
-webkit-filter: opacity($filter);
filter: opacity($filter);
position: absolute;
// bottom: 100px;
top: 130px;
width: 622px;
}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id = 'previewGroup'>
<div id = 'groupBigPreview'>
<div className="addImgBannerInp" style = {{
backgroundImage: `url(${img})`,
}}>
</div>
<img id = 'previewImg' src={img} alt="" style = {{
display: 'none'
}} />
</div>
<div className="addImgBannerInpSmall" style = {{
backgroundImage: `url(${img})`
}}>
</div>
</div>
Ответы (1 шт):
Автор решения: BlackStar1991
→ Ссылка
Если, я правильно понимаю вашу задачу, то в её решении вам могут помочь свойства aspect-ratio которым можно регулировать масштабирование полученого изображения + CSS clip данным свойством можете задать прямоугольник по которому будет "псевдо обрезание" картинки. Вот как реализовано для блока - https://www.w3schools.com/cssref/playdemo.php?filename=playcss_clip