如何將影像從固定大小影片到全屏？

有一個網站頁面的高度和寬度等于瀏覽器視口的 100%（100vw 和 100vh）。

在頁面中心的絕對定位包裝內有一個高質量的影像 (3000x2857px)。影像包裝器具有以像素為單位的最大寬度（例如 300 像素）。

此外，影像具有疊加層。我.active通過單擊覆寫將類添加到影像包裝器。此類使影像包裝器的最大寬度等于 100vw。

所以，我想影片這個。我添加了過渡到max-width, top,transform屬性，但它是滯后的。我知道，這是由于top和max-width因為瀏覽器的重計算的性能。但我不知道如何以其他方式做到這一點。

歡迎任何幫助！

PS 當我寫這個問題時，我發現這個實作在 Safari 中是有問題的。我認為轉換轉換在此瀏覽器中不起作用，因此如果您建議在其中作業的代碼會很棒:(

演示：https : //codepen.io/ghettojezuz/pen/ExvGwJB

const imageWrapper = document.getElementById("image-wrapper");
const overlay = document.getElementById("overlay");

function toggleImageWrapper() {
  if (imageWrapper.classList.contains('active')) {
    imageWrapper.classList.remove('active');
  } else {
    imageWrapper.classList.add('active');
  }
}

overlay.addEventListener("click", () => {
  toggleImageWrapper();
})

body {
  min-height: 100vh;
  overflow-x: hidden;
}

img {
  width: 100%;
  height: auto;
}

.wrapper {
  width: 100vw;
  min-height: 100vh;
  height: 100%;
}

.image-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 300px;
  width: 100%;
  transition: max-width .8s ease, top .8s ease, transform .8s ease;
}

.image-wrapper.active {
  max-width: 100vw;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  opacity: .7;
  transition: background-color .3s ease;
  cursor: pointer;
}

.image-overlay:hover {
  background-color: #000000;
}

<div class="wrapper">
  <div class="image-wrapper" id="image-wrapper">
    <img src="https://via.placeholder.com/3000x2857.webp" alt="">
    <div class="image-overlay" id="overlay"></div>
  </div>
</div>

uj5u.com熱心網友回復：

一種似乎對過渡效果很好的方法是改變比例而不是嘗試重新定位和改變寬度等。

此代碼段保持影像居中并計算從初始寬度移動到 100vw 所需的比例。

注意：它會移除元素上的邊距以確保覆寫視口的整個寬度。

const imageWrapper = document.querySelector('.image-wrapper');
const overlay = document.querySelector('.image-overlay');

function toggleImageWrapper() {
  if (imageWrapper.classList.contains('active')) {
    imageWrapper.classList.remove('active');
  } else {
    imageWrapper.classList.add('active');
  }
}
overlay.addEventListener("click", () => {
  toggleImageWrapper();
})

function init() {
  const w = window.innerWidth;
  const scale = w / imageWrapper.offsetWidth;
  imageWrapper.style.setProperty('--scale', scale);
}
window.onload = init;
window.onresize = init;

* {
  padding: 0;
  margin: 0;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

img {
  width: 100%;
  height: auto;
}

.wrapper {
  width: 100vw;
  min-height: 100vh;
  height: 100%;
}

.image-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 300px;
  width: 100%;
  transition: .8s ease;
}

.image-wrapper.active {
  transform: translate(-50%, -50%) scale(var(--scale));
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  opacity: .7;
  transition: scale .3s ease;
  cursor: pointer;
}

.image-overlay:hover {
  background-color: #000000;
}

<div class="wrapper">
  <div class="image-wrapper" id="image-wrapper">
    <img src="https://via.placeholder.com/3000x2857.webp" alt="">
    <div class="image-overlay" id="overlay"></div>
  </div>
</div>

uj5u.com熱心網友回復：

因此，我嘗試了多種方法，例如不同的 css 屬性、@keyframes影片等。它們都不起作用。但是我發現當影像格式為SVG時，凍結消失了。我知道，并非所有影像都可以轉換為 SVG，但看看你能做些什么。

uj5u.com熱心網友回復：

我改變了頂部并使用 flex 進行變換，現在當你只點擊寬度變化時，但我猜在變換影片的某個時候會發生延遲

const imageWrapper = document.getElementById("image-wrapper");
const overlay = document.getElementById("overlay");

function toggleImageWrapper() {
  if (imageWrapper.classList.contains('active')) {
    imageWrapper.classList.remove('active');
  } else {
    imageWrapper.classList.add('active');
  }
}

overlay.addEventListener("click", () => {
  toggleImageWrapper();
})

body {
  min-height: 100vh;
  overflow-x: hidden;
}

img {
  width: 100%;
  height: auto;
}
.img_container {
  max-width:300px;
  transition: .5s;
  position:relative;
}

.wrapper {
  width: 100vw;
  min-height: 100vh;
  height: 100%;
}

.image-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  bottom:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width: 100%;
  transition: .5s;
}

.image-wrapper.active .img_container {
  max-width: 100vw;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  opacity: .7;
  transition: background-color .3s ease;
  cursor: pointer;
}

.image-overlay:hover {
  background-color: #000000;
}

<div class="wrapper">
  <div class="image-wrapper" id="image-wrapper">
    <div class="img_container">
    <img src="https://via.placeholder.com/3000x2857.webp" alt="">
    <div class="image-overlay" id="overlay"></div>
    </div>
  </div>
</div>

標籤：javascript html css 动画片 css-transitions

上一篇：在不同物件之間傳遞程序

下一篇：調整視窗大小時，我無法擺脫htmlcss中的白色邊框