Как сделать так, чтобы 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

→ Ссылка