From 239f61c506f5de3f9653353fd9542f56903d01f9 Mon Sep 17 00:00:00 2001 From: zenn Date: Wed, 30 Sep 2026 17:55:10 +0900 Subject: [PATCH] =?UTF-8?q?ESG=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EB=B3=B5?= =?UTF-8?q?=EA=B7=80=EC=99=80=20=EA=B8=B0=EC=88=A0=20=EC=97=AD=EB=9F=89=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=A0=95=EB=A0=AC=C2=B7=EC=A7=80?= =?UTF-8?q?=EB=8F=84=20=ED=91=9C=EC=8B=9C=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - ESG 푸터에서 위로 스크롤하면 문서 영역이 먼저 복귀하도록 처리 - 섹션 전환 중 문서 내부 스크롤을 막아 상단 잘림 방지 - 기술 역량 이미지의 상단 여백과 가용 높이를 본문 기준으로 정렬 - 이미지 진입 애니메이션을 고려해 텍스트 겹침과 화면 이탈 방지 - 기술 역량 프로젝트 순서·설명 및 개별 이미지 배치 설정 정리 - 기술 역량 데이터에 맞춰 검색용 정적 HTML 동기화 - 지도 검색용 도로명 주소와 층·호수 안내를 분리해 건물 위치 핀 표시 - 지도 기본 확대 수준을 16으로 설정하고 한국어 표시 적용 - 회사 소개·조직도와 개인정보 동의 거부 안내 문구 정리 검증: - JavaScript 구문 검사 및 git diff --check 통과 - ESG 세 문서의 푸터 복귀·내부 스크롤·키보드 이동 확인 - 기술 역량 29개 슬라이드의 데스크톱 이미지 정렬 및 모바일 이동 확인 - 본사·지사 지도 위치 핀, 상세 주소, 외부 지도 링크 확인 --- about.html | 2 +- capabilities.html | 10 ++-- contact.html | 6 ++- css/styles.css | 10 ++-- index.html | 2 +- js/capabilities-data.js | 108 +++++++++++----------------------------- js/main.js | 37 ++++++++++---- 7 files changed, 73 insertions(+), 102 deletions(-) diff --git a/about.html b/about.html index 1fc2ccf..3ffc26b 100644 --- a/about.html +++ b/about.html @@ -221,7 +221,7 @@
- Technology Teams개발실 + Development Teams개발실
-
-

Autonomous Vehicle FCM 제어기 개발

-

Front Camera Module Controller

-

자율주행 차량의 핵심 전장 기능을 안정적으로 지원할 수 있도록 AUTOSAR 기반 FCM 제어기의 소프트웨어 아키텍처 설계 및 핵심 모듈 통합 개발을 수행하였습니다. AUTOSAR BSW 아키텍처를 기반으로 제어기 소프트웨어 구조를 설계하고 주요 BSW 모듈을 통합하여 차량 전장 환경에 적합한 소프트웨어 플랫폼을 구성하였습니다. 차량 진단 기능을 위한 Application을 개발하고 Cyber Security 관련 사양과 연계하여 ASK 등의 보안 기능을 적용하였으며, CAN 및 CAN-FD 기반 차량 통신 기능을 구현하여 차량 네트워크와의 안정적인 데이터 연계가 가능하도록 구성하였습니다. 또한 DCM을 비롯한 일부 하위 CAN 및 Ethernet AUTOSAR Layer Stack을 개발하였습니다. ISO 및 OEM 요구사항을 기반으로 DoCAN 및 DoIP Stack을 개발하여 CAN 및 Ethernet 환경에서의 진단 통신 기능을 구현하였으며, Bootloader 진단 사양과 Reprogramming 기능을 개발하여 제어기의 안정적인 소프트웨어 업데이트 환경을 구축하였습니다. 이와 함께 Application 영역의 진단 사양을 개발하여 제어기 내부 기능과 진단 시스템 간의 연계성을 확보하였습니다. 이를 통해 AUTOSAR 기반 BSW 아키텍처 설계 및 모듈 통합부터 차량 통신, 진단 Application, Cyber Security, Bootloader 및 DoCAN·DoIP 통신 Stack까지 FCM 제어기 개발에 필요한 핵심 소프트웨어 영역을 종합적으로 구현하였습니다.

-

차량용 공조제어기 SW 개발

H-VAC Controller Basic Software

차량용 공조제어기의 안정적인 소프트웨어 동작과 차량 전장 시스템과의 원활한 연계를 위해 AUTOSAR 기반의 BSW 및 Middleware를 개발하고, 제어기의 핵심 기능과 진단·보안·업데이트 기능을 통합 구현하였습니다. FBL(Flash Boot Loader) 기능을 구현하고 Sleep & Wake-up 사양을 개발하여 차량의 전원 상태 변화에 따른 제어기의 안정적인 동작 환경을 확보하였습니다. BSW Configuration 및 Implementation을 수행하고 Middleware를 구현하였으며, M-CAL Port를 비롯하여 ADC, PWM, ICU, IoHwAb, OS 등 주요 AUTOSAR 모듈을 설정하고 제어기 사양에 맞게 통합하였습니다. 또한 CAN 요구사항을 반영하여 관련 DB를 Import하고 Generate 및 Harmonize 과정을 수행함으로써 차량 네트워크 환경과 제어기 소프트웨어 간의 통신 연계성을 구현하였습니다. 보안 기능 강화를 위해 HSM, ASK, SFM 및 Crypto Library를 포팅하고 기능 검증을 수행하여 차량용 제어기에 요구되는 보안 기능을 안정적으로 적용하였습니다. 진단 영역에서는 DiagDCM 및 DEM Configuration을 수행하고 관련 기능을 검증하여 차량 진단 시스템과 제어기 간의 안정적인 진단 환경을 구축하였습니다. OTA(Over-The-Air) 기반 Background 및 Reprogramming 기능을 개발하고 검증하여 차량 소프트웨어를 안정적으로 업데이트할 수 있는 환경을 구현하였습니다. Watch-Dog 요구사항을 반영 개발하였습니다.

+
+

Autonomous Vehicle FCM 제어기 개발

+

Front Camera Module Controller

+

자율주행 차량의 핵심 전장 기능을 안정적으로 지원할 수 있도록 AUTOSAR 기반 FCM 제어기의 소프트웨어 아키텍처 설계 및 핵심 모듈 통합 개발을 수행하였습니다. AUTOSAR BSW 아키텍처를 기반으로 제어기 소프트웨어 구조를 설계하고 주요 BSW 모듈을 통합하여 차량 전장 환경에 적합한 소프트웨어 플랫폼을 구성하였습니다. 차량 진단 기능을 위한 Application을 개발하고 Cyber Security 관련 사양과 연계하여 ASK 등의 보안 기능을 적용하였으며, CAN 및 CAN-FD 기반 차량 통신 기능을 구현하여 차량 네트워크와의 안정적인 데이터 연계가 가능하도록 구성하였습니다. 또한 DCM을 비롯한 일부 하위 CAN 및 Ethernet AUTOSAR Layer Stack을 개발하였습니다. ISO 및 OEM 요구사항을 기반으로 DoCAN 및 DoIP Stack을 개발하여 CAN 및 Ethernet 환경에서의 진단 통신 기능을 구현하였으며, Bootloader 진단 사양과 Reprogramming 기능을 개발하여 제어기의 안정적인 소프트웨어 업데이트 환경을 구축하였습니다. 이와 함께 Application 영역의 진단 사양을 개발하여 제어기 내부 기능과 진단 시스템 간의 연계성을 확보하였습니다. 이를 통해 AUTOSAR 기반 BSW 아키텍처 설계 및 모듈 통합부터 차량 통신, 진단 Application, Cyber Security, Bootloader 및 DoCAN·DoIP 통신 Stack까지 FCM 제어기 개발에 필요한 핵심 소프트웨어 영역을 종합적으로 구현하였습니다.

+

A-SPICE 기반 SWE5 통합검증

Software Engineering Process Integration Test

diff --git a/contact.html b/contact.html index 9bfb8cc..4bd8b1f 100644 --- a/contact.html +++ b/contact.html @@ -54,7 +54,8 @@ type="button" class="office-map-button" data-map-title="대구 본사" - data-map-address="대구광역시 북구 경대로17길 47 IT융합산업빌딩" + data-map-address="대구광역시 북구 경대로17길 47 IT융합산업빌딩 8층 803호" + data-map-query="대구광역시 북구 경대로17길 47" aria-label="대구 본사 지도 보기" title="지도 보기" > @@ -71,7 +72,8 @@ type="button" class="office-map-button" data-map-title="서울 지사" - data-map-address="서울특별시 강남구 논현로 416 운기빌딩" + data-map-address="서울특별시 강남구 논현로 416 운기빌딩 6층" + data-map-query="서울특별시 강남구 논현로 416" aria-label="서울 지사 지도 보기" title="지도 보기" > diff --git a/css/styles.css b/css/styles.css index 2f84152..2742f05 100644 --- a/css/styles.css +++ b/css/styles.css @@ -829,23 +829,23 @@ p { position: absolute; z-index: 1; right: clamp(190px, 17vw, 330px); - top: calc(50% + 6px); + top: calc((100% + var(--capabilities-content-top) - 96px) / 2); bottom: auto; width: min(44vw, 720px); height: auto; - max-height: calc(100dvh - 228px); + max-height: max(0px, calc(100dvh - var(--capabilities-content-top) - 96px)); object-fit: contain; opacity: 0; pointer-events: none; filter: drop-shadow(0 28px 46px rgba(0, 0, 0, .48)); transform: translate(0, -50%); - translate: calc(var(--object-fit-x, 0px) - 36px) 0; + translate: calc(var(--object-fit-x, 0px) - 36px) var(--object-fit-y, 0px); transition: opacity .28s var(--ease), translate .28s var(--ease); } .feature-object.is-visible { opacity: .96; - translate: var(--object-fit-x, 0px) 0; + translate: var(--object-fit-x, 0px) var(--object-fit-y, 0px); transform: translate(0, -50%) scale(1); } @@ -905,7 +905,7 @@ p { } .feature-object.is-motion-bottom:not(.is-visible) { - translate: var(--object-fit-x, 0px) 36px; + translate: var(--object-fit-x, 0px) calc(var(--object-fit-y, 0px) + 36px); } .feature-object.is-repositioning { diff --git a/index.html b/index.html index 927f154..c23c88b 100644 --- a/index.html +++ b/index.html @@ -73,7 +73,7 @@
About
-

Network, Data, Human을 연결하는 Total SW 개발 조직입니다.

+

Network, Data, Human을 연결하는 Total SW 개발 회사입니다.

AUTOSAR 기반 자동차 전장 개발, AI 기반 관제 스마트 플랫폼, 로봇 SW 개발 및 AI 플랫폼, 웹·앱 SI 개발까지 다양한 R&D 및 협력 개발을 통해 양질의 기술 지원을 제공합니다. diff --git a/js/capabilities-data.js b/js/capabilities-data.js index b1a3514..5a2f5c5 100644 --- a/js/capabilities-data.js +++ b/js/capabilities-data.js @@ -16,7 +16,7 @@ MATLAB Simulink를 활용한 Model 기반 Application Software 설계 및 검증 ISO 26262 기능 안전 개발 프로세스 기반 업무 (ASIL, FMEA, DFA) 를 수행하였습니다. `, - scope: "Safety mechanism · Platform", + scope: "Side Body Control Module", output: "SW module · Verification", image: "assets/images/automotive/automotive_01_background.jpeg", objectImage: "assets/images/automotive/automotive_01_object.png", @@ -44,6 +44,27 @@ RTE( Runtime Environment)를 Generate하고 BSW 영역과 연계하여 Applicati output: "Issue report · Tool flow", image: "assets/images/automotive/automotive_02_background.png", objectImage: "assets/images/automotive/automotive_02_object.png", + }, + // P.15 + { + id: "hvac-autosar-bsw-development", + type: "automotive", + category: "AUTOSAR BSW DEVELOPMENT", + title: "차량용 공조제어기 SW 개발", + subtitle: "H-VAC Controller Basic Software", + description: `차량용 공조제어기의 안정적인 소프트웨어 동작과 차량 전장 시스템과의 원활한 연계를 위해 AUTOSAR 기반의 BSW 및 Middleware를 개발하고, 제어기의 핵심 기능과 진단·보안·업데이트 기능을 통합 구현하였습니다. + +FBL(Flash Boot Loader) 기능을 구현하고 Sleep & Wake-up 사양을 개발하여 차량의 전원 상태 변화에 따른 제어기의 안정적인 동작 환경을 확보하였습니다. BSW Configuration 및 Implementation을 수행하고 Middleware를 구현하였으며, M-CAL Port를 비롯하여 ADC, PWM, ICU, IoHwAb, OS 등 주요 AUTOSAR 모듈을 설정하고 제어기 사양에 맞게 통합하였습니다. + +또한 CAN 요구사항을 반영하여 관련 DB를 Import하고 Generate 및 Harmonize 과정을 수행함으로써 차량 네트워크 환경과 제어기 소프트웨어 간의 통신 연계성을 구현하였습니다. + +보안 기능 강화를 위해 HSM, ASK, SFM 및 Crypto Library를 포팅하고 기능 검증을 수행하여 차량용 제어기에 요구되는 보안 기능을 안정적으로 적용하였습니다. 진단 영역에서는 DiagDCM 및 DEM Configuration을 수행하고 관련 기능을 검증하여 차량 진단 시스템과 제어기 간의 안정적인 진단 환경을 구축하였습니다. + +OTA(Over-The-Air) 기반 Background 및 Reprogramming 기능을 개발하고 검증하여 차량 소프트웨어를 안정적으로 업데이트할 수 있는 환경을 구현하였습니다. Watch-Dog 요구사항을 반영 개발하였습니다.`, + scope: "H-VAC Controller Basic Software", + output: "Control module · QA", + image: "assets/images/automotive/automotive_04_background.jpeg", + objectImage: "assets/images/automotive/automotive_04_object.png", }, // P.14 { @@ -67,27 +88,6 @@ ISO 및 OEM 요구사항을 기반으로 DoCAN 및 DoIP Stack을 개발하여 CA image: "assets/images/automotive/automotive_03_background.png", objectImage: "assets/images/automotive/automotive_03_object.png", }, - // P.15 - { - id: "hvac-autosar-bsw-development", - type: "automotive", - category: "AUTOSAR BSW DEVELOPMENT", - title: "차량용 공조제어기 SW 개발", - subtitle: "H-VAC Controller Basic Software", - description: `차량용 공조제어기의 안정적인 소프트웨어 동작과 차량 전장 시스템과의 원활한 연계를 위해 AUTOSAR 기반의 BSW 및 Middleware를 개발하고, 제어기의 핵심 기능과 진단·보안·업데이트 기능을 통합 구현하였습니다. - -FBL(Flash Boot Loader) 기능을 구현하고 Sleep & Wake-up 사양을 개발하여 차량의 전원 상태 변화에 따른 제어기의 안정적인 동작 환경을 확보하였습니다. BSW Configuration 및 Implementation을 수행하고 Middleware를 구현하였으며, M-CAL Port를 비롯하여 ADC, PWM, ICU, IoHwAb, OS 등 주요 AUTOSAR 모듈을 설정하고 제어기 사양에 맞게 통합하였습니다. - -또한 CAN 요구사항을 반영하여 관련 DB를 Import하고 Generate 및 Harmonize 과정을 수행함으로써 차량 네트워크 환경과 제어기 소프트웨어 간의 통신 연계성을 구현하였습니다. - -보안 기능 강화를 위해 HSM, ASK, SFM 및 Crypto Library를 포팅하고 기능 검증을 수행하여 차량용 제어기에 요구되는 보안 기능을 안정적으로 적용하였습니다. 진단 영역에서는 DiagDCM 및 DEM Configuration을 수행하고 관련 기능을 검증하여 차량 진단 시스템과 제어기 간의 안정적인 진단 환경을 구축하였습니다. - -OTA(Over-The-Air) 기반 Background 및 Reprogramming 기능을 개발하고 검증하여 차량 소프트웨어를 안정적으로 업데이트할 수 있는 환경을 구현하였습니다. Watch-Dog 요구사항을 반영 개발하였습니다.`, - scope: "H-VAC Controller Basic Software", - output: "Control module · QA", - image: "assets/images/automotive/automotive_04_background.jpeg", - objectImage: "assets/images/automotive/automotive_04_object.png", - }, // P.16 { id: "a-spice-swe5-integration-verification", @@ -427,13 +427,6 @@ GPS 기반의 위치 정보를 활용하여 대중교통의 이동 상황을 실 output: "Control room · Alert", image: "assets/images/solution/solution_05_background.png", objectImage: "assets/images/solution/solution_05_object.png", - objectLayout: { - x: "50%", - y: "50%", - anchorX: "-50%", - anchorY: "-50%", - maxHeight: "560px", - }, }, // P.33 { @@ -454,13 +447,6 @@ GPS 기반의 위치 정보를 활용하여 대중교통의 이동 상황을 실 output: "Capture flow · Viewer", image: "assets/images/solution/solution_06_background.jpeg", objectImage: "assets/images/solution/solution_06_object.png", - objectLayout: { - x: "50%", - y: "50%", - anchorX: "-50%", - anchorY: "-50%", - maxHeight: "560px", - }, }, // P.34 { @@ -481,13 +467,6 @@ GPS 기반의 위치 정보를 활용하여 대중교통의 이동 상황을 실 output: "Pipeline · Dashboard", image: "assets/images/solution/solution_07_background.jpeg", objectImage: "assets/images/solution/solution_07_object.png", - objectLayout: { - x: "50%", - y: "50%", - anchorX: "-50%", - anchorY: "-50%", - maxHeight: "560px", - }, }, // P.35 { @@ -508,13 +487,7 @@ GPS 기반의 위치 정보를 활용하여 대중교통의 이동 상황을 실 output: "Recognition module", image: "assets/images/solution/solution_08_background.jpg", objectImage: "assets/images/solution/solution_08_object.png", - objectLayout: { - x: "50%", - y: "50%", - anchorX: "-50%", - anchorY: "-50%", - maxHeight: "560px", - }, + }, // Certifications { @@ -589,13 +562,6 @@ AUTOSAR 표준 기반의 플랫폼 환경에서 ECU 기능에 필요한 모듈 output: "Admin · Approval flow", image: "assets/images/si/si_02_background.jpg", objectImage: "assets/images/si/si_02_object.png", - objectLayout: { - x: "50%", - y: "50%", - anchorX: "-50%", - anchorY: "-50%", - maxHeight: "560px", - }, }, // P.40 { @@ -642,13 +608,6 @@ AUTOSAR 표준 기반의 플랫폼 환경에서 ECU 기능에 필요한 모듈 output: "iOS/Android · API", image: "assets/images/si/si_04_background.png", objectImage: "assets/images/si/si_04_object.png", - objectLayout: { - x: "50%", - y: "50%", - anchorX: "-50%", - anchorY: "-50%", - maxHeight: "560px", - }, }, // P.42 { @@ -711,13 +670,13 @@ GPS 기반의 자녀 안심존 관리 기능을 통해 지정된 안전 구역 output: "Backend · Docs", image: "assets/images/si/si_07_background.png", objectImage: "assets/images/si/si_07_object.png", - objectLayout: { - x: "50%", - y: "50%", - anchorX: "-50%", - anchorY: "-50%", - maxHeight: "560px", - }, + // objectLayout: { + // x: "50%", + // y: "50%", + // anchorX: "-50%", + // anchorY: "-50%", + // maxHeight: "560px", + // }, }, // P.45 { @@ -740,12 +699,5 @@ GPS 기반의 자녀 안심존 관리 기능을 통해 지정된 안전 구역 output: "Backend · Docs", image: "assets/images/si/si_08_background.png", objectImage: "assets/images/si/si_08_object.png", - objectLayout: { - x: "50%", - y: "50%", - anchorX: "-50%", - anchorY: "-50%", - maxHeight: "560px", - }, }, ]; diff --git a/js/main.js b/js/main.js index 7c35e39..d0bc7f0 100644 --- a/js/main.js +++ b/js/main.js @@ -176,6 +176,10 @@ function canScrollPolicy(target, direction) { const panel = target.closest(".esg-policy-panel"); if (!panel || panel.hidden) return false; + const workspace = panel.closest(".esg-workspace"); + // Restore the whole reader below the header before scrolling its document. + if (workspace && Math.abs(window.scrollY - sectionStop(workspace)) > 4) return false; + if (performance.now() < transitionUntil) return false; const remaining = panel.scrollHeight - panel.clientHeight - panel.scrollTop; return direction > 0 ? remaining > 2 : panel.scrollTop > 2; } @@ -238,10 +242,8 @@

수집된 개인정보는 문의 처리 완료 후 1년간 보관하며, 보유 기간이 지나면 지체 없이 파기합니다.

4. 정보 제공 및 처리 위탁

제공된 정보는 문의 응대 목적으로 사용합니다. 외부 서비스에 처리를 위탁하는 경우 해당 서비스와 처리 범위를 운영 방침에 명시합니다.

-

5. 동의 거부 및 정보 확인

-

개인정보 수집 및 이용에 동의하지 않을 수 있습니다. 동의하지 않으면 온라인 문의를 전송할 수 없으며, 고객센터로 직접 연락할 수 있습니다. 제공한 정보의 확인, 수정, 삭제 요청도 고객센터로 문의할 수 있습니다.

-

6. 개인정보 관련 문의

-

주식회사 모비핀테크놀러지 · 고객센터 053-214-0592
평일 09:00 ~ 18:00

`, +

5. 동의 거부

+

개인정보 수집 및 이용에 동의하지 않을 수 있습니다. 다만, 동의하지 않을 경우 온라인 문의 서비스를 이용할 수 없습니다.

`, }, sitemap: { title: "사이트맵", @@ -350,10 +352,11 @@ trigger.addEventListener("click", () => { const office = trigger.dataset.mapTitle; const address = trigger.dataset.mapAddress; - const query = encodeURIComponent(address); + // Search for the building; floor/unit details can prevent a map pin from resolving. + const query = encodeURIComponent(trigger.dataset.mapQuery || address); title.textContent = `${office} 오시는 길`; frame.title = `${office} 위치 지도`; - frame.src = `https://maps.google.com/maps?q=${query}&z=15&output=embed`; + frame.src = `https://maps.google.com/maps?q=${query}&z=16&hl=ko&output=embed`; addressLabel.textContent = address; mapLink.href = `https://www.google.com/maps/search/?api=1&query=${query}`; dialog.showModal(); @@ -752,29 +755,43 @@ const titleBottom = featureTitle.getBoundingClientRect().bottom - stageBounds.top; capabilitiesWorkbench.style.setProperty("--certificate-top", `${titleBottom + 24}px`); } - const contentRight = featureContent.getBoundingClientRect().right + 32; + const contentBounds = featureContent.getBoundingClientRect(); + const contentRight = contentBounds.right + 32; + const contentTop = contentBounds.top; + const contentBottom = stageBounds.bottom - parseFloat(window.getComputedStyle(stage).paddingBottom); [featureObject, featureObjectSecondary].forEach((element) => { if (!element) return; element.style.removeProperty("width"); element.style.removeProperty("height"); element.style.removeProperty("--object-fit-x"); + element.style.removeProperty("--object-fit-y"); if (!desktop || !hasDescription || !element.getAttribute("src")) return; const style = window.getComputedStyle(element); const width = parseFloat(style.width); const height = parseFloat(style.height); const available = Math.max(0, stageBounds.right - contentRight); + const availableHeight = Math.max(0, contentBottom - contentTop); if (!width || !height) return; // Fit the actual image ratio, not the potentially letterboxed CSS rectangle. const naturalWidth = element.naturalWidth; const naturalHeight = element.naturalHeight; if (!naturalWidth || !naturalHeight) return; - const ratio = Math.min(width / naturalWidth, height / naturalHeight, available / naturalWidth); + const ratio = Math.min(width / naturalWidth, height / naturalHeight, + available / naturalWidth, availableHeight / naturalHeight); element.style.width = `${naturalWidth * ratio}px`; element.style.height = `${naturalHeight * ratio}px`; const bounds = element.getBoundingClientRect(); - const motionX = parseFloat(window.getComputedStyle(element).translate) || 0; - const settledLeft = bounds.left - motionX; + const fittedStyle = window.getComputedStyle(element); + const [motionX = 0, motionY = 0] = fittedStyle.translate.split(" ").map(parseFloat); + const transform = new DOMMatrixReadOnly(fittedStyle.transform); + const [originX, originY] = fittedStyle.transformOrigin.split(" ").map(parseFloat); + // Measure the final position, excluding entry translation and scale. + const settledLeft = bounds.left - motionX + (transform.a - 1) * originX; + const settledTop = bounds.top - motionY + (transform.d - 1) * originY; + const settledBottom = settledTop + naturalHeight * ratio; element.style.setProperty("--object-fit-x", `${Math.max(0, contentRight - settledLeft)}px`); + element.style.setProperty("--object-fit-y", `${Math.max(contentTop - settledTop, + Math.min(0, contentBottom - settledBottom))}px`); }); }