悬停时调整图像大小但保持纵横比和内部屏幕

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>

悬停时调整图像大小但保持纵横比和内部屏幕

Resize image on hover but keep aspect ratio and inside screen

html

css

hover

css-transforms