在悬停时调整图像大小，但保持高宽比和内部屏幕

Question

这意味着只在桌面上工作。

问题是，即使我已经设法缩放图像在悬停和保持高宽比，我无法设法使一个平稳的悬停体验。

图像边界框(或父div)比图像大，因此当用户滚动出图像时，缩放效果(逻辑上)再加上屏幕右侧的图像，在悬停时离开视线。

如何保持高宽比，将图像保持在屏幕上，将其余内容保持在适当位置，并仅在用户悬停图像时(当用户停止在图像上悬停时返回到默认状态)进行缩放。

​

.la-inversion {
  max-width: 100%;
}
.la-inversion__izquierda img {
  max-width: 100%;
}
.la-inversion__derecha__titulo {
  font-size: 3.5rem;
  margin-left: 2rem;
  margin-top: 2.5rem;
}
.la-inversion__derecha__subtitulo {
  margin-left: 2rem;
  margin-top: 1rem;
  width: 71.5%;
}
.la-inversion__derecha__imagenes {
  margin-top: 1rem;
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
}
.la-inversion__derecha__imagenes__derecha {
  display: flex;
  height: 90vw;
  justify-content: space-evenly;
}
.la-inversion__derecha__imagenes__derecha div {
  width: 45vw;
  height: 45vw;
  overflow: hidden;
  position: relative;
}
.la-inversion__derecha__imagenes__derecha div img {
  position: absolute;
  left: -1000%;
  right: -1000%;
  top: -1000%;
  bottom: -1000%;
  margin: auto;
  min-height: 100%;
  min-width: 100%;
  max-width: 150%;
  max-height: 150%;
}
.la-inversion__derecha__imagenes__derecha div:nth-child(2) {
  align-self: flex-end;
}
.la-inversion__derecha__imagenes__izquierda {
  display: flex;
  height: 90vw;
  justify-content: space-evenly;
}
.la-inversion__derecha__imagenes__izquierda div {
  height: 45vw;
  width: 45vw;
  overflow: hidden;
  position: relative;
}
.la-inversion__derecha__imagenes__izquierda div img {
  position: absolute;
  left: -1000%;
  right: -1000%;
  top: -1000%;
  bottom: -1000%;
  margin: auto;
  min-height: 100%;
  min-width: 100%;
  max-width: 150%;
  max-height: 150%;
}
.la-inversion__derecha__imagenes__izquierda div:nth-child(2) {
  align-self: flex-end;
}

  .img-scale-div{
    transition: .3s;
  }
  .img-scale-img{
    transition: .3s;
  }
@media only screen and (min-width: 769px) {

  .img-scale-div:hover {
    transform: scale(4, 4) translate(-2vw);
    z-index: 2;
    align-self: center;
    outline: groove;
  }
  .img-scale-div:hover > .img-scale-img {
    position: initial;
    margin: 0;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    max-height: 100%;
  }

.la-inversion {
    display: flex;
    -moz-column-gap: 7.5rem;
         column-gap: 7.5rem;
    width: calc( 100% - 9rem );
    justify-content: center;
    margin: 20rem auto 0;
  }
  .la-inversion__izquierda {
    flex: 2 0 0;
  }
  .la-inversion__derecha {
    flex: 1 0 0;
  }
  .la-inversion__derecha__subtitulo {
    margin-left: 0rem;
    width: auto;
    -moz-column-count: 2;
         column-count: 2;
    font-size: 16px;
    -moz-column-gap: 2rem;
         column-gap: 2rem;
    -moz-column-width: 234px;
         column-width: 234px;
  }
  .la-inversion__derecha__imagenes {
    flex-direction: row;
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
    margin-top: 4rem;
  }
  .la-inversion__derecha__imagenes__derecha {
    height: 236px;
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
  }
  .la-inversion__derecha__imagenes__derecha__titulo {
    font-size: 4.5rem;
    text-align: center;
    margin-left: 0;
  }
  .la-inversion__derecha__imagenes__derecha div {
    width: 118px;
    height: 118px;
  }
  .la-inversion__derecha__imagenes__izquierda {
    height: 236px;
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
  }
  .la-inversion__derecha__imagenes__izquierda div {
    width: 118px;
    height: 118px;
  }

}

<div class="la-inversion">

            <div class="la-inversion__izquierda">
                <img src="https://i.ibb.co/JktFp0J/imagen-vertical-inversion.png" alt="" >
            </div>

            <div class="la-inversion__derecha">
                <h2 class="la-inversion__derecha__titulo">1. La Inversión</h2>
                <p class="la-inversion__derecha__subtitulo">Rodeado de montañas, enclavado en un valle amplio con vegetación baja y autóctona que da la sensación de estar en plena estepa patagónica aunque en verdad nos encontramos dentro del bosque andino. <br><br>Suspendisse faucibus tincidunt pulvinar. Suspendisse quis tortor et sem lobortis auctor vehicula vitae libero. Aliquam nisl odio, sagittis.</p>
                <div class="la-inversion__derecha__imagenes">

                    <div class="la-inversion__derecha__imagenes__derecha">
                        <div class="img-scale-div"><img class="img-scale-img"  src="https://i.ibb.co/6R2XWkS/ba-o-vertical.jpg" alt="" srcset=""></div>
                        <div class="img-scale-div"><img class="img-scale-img"  src="https://i.ibb.co/Jj5yHgt/ba-o-horizontal.jpg" alt="" srcset=""></div>
                    
                    </div>

                    <div class="la-inversion__derecha__imagenes__izquierda">
                        <div class="img-scale-div"><img class="img-scale-img" src="https://i.ibb.co/SPpkq6Y/cocina-horizontal.jpg" alt="" srcset=""></div>
                        <div class="img-scale-div"><img class="img-scale-img" src="https://i.ibb.co/wMQzXxT/living-horizontal.jpg" alt="" srcset=""></div>
                    
                    </div>
                </div>
            </div>
        
        </div>

​

Answer 1

您需要获得图像的自然大小，因为您需要一些javascript。可以随意使用dataset从图像中获取初始大小值，我编写它们就像编写css一样。

​

const onScaleImage = (e) => {
   const image = e.target.closest('.img-scale-img');
   
  if (image) {
    if (e.type === 'mouseover') {
       image.style.height = `${image.naturalHeight}px`;
       image.style.width = `${image.naturalWidth}px`; 
    } else {
      image.style.height = '118px';
      image.style.width = '118px'; 
    }
  }
}

document.addEventListener('mouseover', onScaleImage)
document.addEventListener('mouseout', onScaleImage)

.la-inversion {
  max-width: 100%;
}
.la-inversion__izquierda img {
  max-width: 100%;
}
.la-inversion__derecha__titulo {
  font-size: 3.5rem;
  margin-left: 2rem;
  margin-top: 2.5rem;
}
.la-inversion__derecha__subtitulo {
  margin-left: 2rem;
  margin-top: 1rem;
  width: 71.5%;
}
.la-inversion__derecha__imagenes {
  margin-top: 1rem;
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
}
.la-inversion__derecha__imagenes__derecha {
  display: flex;
  justify-content: space-evenly;
}
.la-inversion__derecha__imagenes__derecha div {
  position: relative;
}
.la-inversion__derecha__imagenes__derecha div img {
      height: 100%;
    width: 100%;
    object-fit: cover;
    
  position: absolute;
  right: 0;
      top: 50%;
    transform: translateY(-50%);
}
.la-inversion__derecha__imagenes__derecha div:nth-child(2) {
  align-self: flex-end;
}
.la-inversion__derecha__imagenes__izquierda {
  display: flex;
  justify-content: space-evenly;
}
.la-inversion__derecha__imagenes__izquierda div {
  position: relative;
}
.la-inversion__derecha__imagenes__izquierda div img {
  height: 100%;
  width: 100%;
  object-fit: cover;
   position: absolute;
  right: 0;
      top: 50%;
    transform: translateY(-50%);
}
.la-inversion__derecha__imagenes__izquierda div:nth-child(2) {
  align-self: flex-end;
}

  .img-scale-div{
    transition: .3s;
  }
  .img-scale-img{
    transition: .3s;
  }
@media only screen and (min-width: 769px) {
.la-inversion {
    display: flex;
    -moz-column-gap: 7.5rem;
         column-gap: 7.5rem;
    width: calc( 100% - 9rem );
    justify-content: center;
    margin: 20rem auto 0;
  }
  .la-inversion__izquierda {
    flex: 2 0 0;
  }
  .la-inversion__derecha {
    flex: 1 0 0;
  }
  .la-inversion__derecha__subtitulo {
    margin-left: 0rem;
    width: auto;
    -moz-column-count: 2;
         column-count: 2;
    font-size: 16px;
    -moz-column-gap: 2rem;
         column-gap: 2rem;
    -moz-column-width: 234px;
         column-width: 234px;
  }
  .la-inversion__derecha__imagenes {
    flex-direction: row;
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
    margin-top: 4rem;
  }
  .la-inversion__derecha__imagenes__derecha {
    height: 236px;
     display: flex;
    gap: 1.5rem;
  }
  .la-inversion__derecha__imagenes__derecha__titulo {
    font-size: 4.5rem;
    text-align: center;
    margin-left: 0;
  }
  .img-scale-img:hover {
        outline: groove;
  }
  .la-inversion__derecha__imagenes__derecha .img-scale-div {
    width: 118px;
    height: 118px;
  }
  .la-inversion__derecha__imagenes__izquierda {
      height: 236px;
    display: flex;
    gap: 1.5rem;
  }
  .la-inversion__derecha__imagenes__izquierda .img-scale-div {
    width: 118px;
    height: 118px;
  }

}

<div class="la-inversion">

            <div class="la-inversion__izquierda">
                <img src="https://i.ibb.co/JktFp0J/imagen-vertical-inversion.png" alt="" >
            </div>

            <div class="la-inversion__derecha">
                <h2 class="la-inversion__derecha__titulo">1. La Inversión</h2>
                <p class="la-inversion__derecha__subtitulo">Rodeado de montañas, enclavado en un valle amplio con vegetación baja y autóctona que da la sensación de estar en plena estepa patagónica aunque en verdad nos encontramos dentro del bosque andino. <br><br>Suspendisse faucibus tincidunt pulvinar. Suspendisse quis tortor et sem lobortis auctor vehicula vitae libero. Aliquam nisl odio, sagittis.</p>
                <div class="la-inversion__derecha__imagenes">

                    <div class="la-inversion__derecha__imagenes__derecha">
                        <div><div class="img-scale-div"><img class="img-scale-img"  src="https://i.ibb.co/6R2XWkS/ba-o-vertical.jpg" alt="" srcset=""></div></div>
                       <div> <div class="img-scale-div"><img class="img-scale-img"  src="https://i.ibb.co/Jj5yHgt/ba-o-horizontal.jpg" alt="" srcset=""></div></div>
                    
                    </div>

                    <div class="la-inversion__derecha__imagenes__izquierda">
                        <div><div class="img-scale-div"><img class="img-scale-img" src="https://i.ibb.co/SPpkq6Y/cocina-horizontal.jpg" alt="" srcset=""></div></div>
                        <div><div class="img-scale-div"><img class="img-scale-img" src="https://i.ibb.co/wMQzXxT/living-horizontal.jpg" alt="" srcset=""></div></div>
                    
                    </div>
                </div>
            </div>
        
        </div>

​