在特定影像需要使用CSS 的object-fit: cover 保持一致高度的情況下;屬性,使用者可能會在IE 和Edge 瀏覽器中遇到問題。縮放瀏覽器時,影像會調整寬度而不是縮放,從而導致失真。
要解決此問題,請考慮以下 CSS 方法:
<code class="css">position: absolute;</code>
<code class="css">top: 50%; left: 50%; transform: translate(-50%, -50%);</code>
<code class="css">// For vertical blocks (height greater than width): height: 100%; width: auto; // For horizontal blocks (width greater than height): height: auto; width: 100%;</code>這種方法模擬了object-fit: cover的效果;並確保在所有瀏覽器(包括 IE 和 Edge)上的行為一致。 有關實際演示,請參閱:
https://jsfiddle.net/furqan_694/s3xLe1gp/
以上是如何修復 IE 和 Edge 中的物件適配:覆蓋失真?的詳細內容。更多資訊請關注PHP中文網其他相關文章!