水平對齊div內的拉伸圖像？

Question

如何以任意百分比水平對齊 div 內的拉伸/縮放圖像？

請參閱下面的 html。 圖像需要在 div 內以任意百分比水平對齊。
所以， 0% = 左， 50% = 居中， 53% =幾乎居中， 100% = 右

 // just a toggle script, not relevant to the question const toggle = function() { const viewportElement = document.querySelector('.viewport'); if (viewportElement.classList.contains('viewport--portrait')) { viewportElement.classList.remove('viewport--portrait') } else { viewportElement.classList.add('viewport--portrait') } };

 .viewport { position: relative; margin: 60px auto; overflow: hidden; width: 667px; height: 375px; }.viewport--portrait { width: 375px; height: 667px; }.btn_toggle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; padding: 10px 20px; } /* *** relevant styles below *** */.container { position: relative; height: 100%; width: 100%; border: 1px solid blue; }.image-wrapper { position: absolute; left: 0; right: 0; width: 100%; height: 100%; /*???? */ }.image-wrapper img { height: 100%; width: auto; object-fit: cover; }

 <div class="viewport viewport--portrait"> <div class="container"> <div class="image-wrapper"> <img src="https://i.imgur.com/nigSBoN.jpeg" width="1952" height="765" alt="Chocolate;"> </div> <button class="btn_toggle" onclick="toggle();">Toggle</button> </div> </div>

<div class="viewport">
    <div class="container">
        <div class="image-wrapper">
            <img src="chocolate.jpg" width="1952" height="765" alt="Chocolate!">
        </div>
    </div>
</div>

有沒有一種方法可以一致地水平對齊拉伸的圖像？

Answer 1

利用

  position: relative;
  left: var(--p);
  transform: translate(calc(-1*var( --p)));

在圖像元素上然后簡單地調整變量來定義百分比：

 // just a toggle script, not relevant to the question const toggle = function() { const viewportElement = document.querySelector('.viewport'); if (viewportElement.classList.contains('viewport--portrait')) { viewportElement.classList.remove('viewport--portrait') } else { viewportElement.classList.add('viewport--portrait') } };

 .viewport { position: relative; margin: 60px auto; overflow: hidden; width: 667px; height: 375px; }.viewport--portrait { width: 375px; height: 667px; }.btn_toggle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; padding: 10px 20px; } /* *** relevant styles below *** */.container { position: relative; height: 100%; width: 100%; border: 1px solid blue; box-sizing: border-box; }.image-wrapper { --p: 20%; position: absolute; left: 0; right: 0; width: 100%; height: 100%; }.image-wrapper img { height: 100%; width: auto; object-fit: cover; position: relative; left: var(--p); transform: translate(calc(-1*var( --p))); }

 <div class="viewport viewport--portrait"> <div class="container"> <div class="image-wrapper"> <img src="https://i.imgur.com/nigSBoN.jpeg" width="1952" height="765" alt="Chocolate;"> </div> <button class="btn_toggle" onclick="toggle();">Toggle</button> </div> </div>