Wie übersetze ich ein Bild basierend auf seiner Höhe?

Question

Ich habe ein großes Bild, das ist in einem Div, das nicht so groß ist. Ich möchte das ganze Bild zeigen, indem ich es übersetze. Das ist, was ich habe, so weit:

https://jsfiddle.net/swv0w0em/

document.addEventListener("mouseover", function(event) { 
 
    var element = event.target; 
 
    if (element.classList.contains("myImage") && 
 
    element.naturalWidth < element.naturalHeight) { 
 
    element.className += " imageScroll"; 
 

 

 
    //element.style.transform = "translate(0,-" + element.naturalHeight + ")"; 
 
    //element.style.mozTransition = "translate(0,-" + element.naturalHeight + ")"; 
 
    //element.style.msTransform = "translate(0,-" + element.naturalHeight + ")"; 
 
    //element.style.oTransform = "translate(0,-" + element.naturalHeight + ")"; 
 
    //element.style.webkitTransform = "translate(0,-" + element.naturalHeight + ")"; 
 
    } 
 
}); 
 
document.addEventListener("mouseout", function(event) { 
 
    var element = event.target; 
 
    if (element.classList.contains("myImage")) { 
 
    element.className = element.className.replace(
 
     /(?:^|\s)imageScroll(?!\S)/g, '' 
 
    ); 
 
    } 
 
});

div { 
 
    height: 200px; 
 
    overflow: hidden; 
 
    background-color: red; 
 
} 
 
img { 
 
    -moz-transition: all 3s ease-in-out; 
 
    -o-transition: all 3s ease-in-out; 
 
    -webkit-transition: all 3s ease-in-out; 
 
    transition: all 3s ease-in-out; 
 
} 
 
.imageScroll { 
 
    -moz-transform: translate(0, -350px); 
 
    -ms-transform: translate(0, -350px); 
 
    -o-transform: translate(0, -350px); 
 
    -webkit-transform: translate(0, -350px); 
 
    transform: translate(0, -350px); 
 
}

<div> 
 
    <img src="https://placeimg.com/300/800/any" class="myImage" alt="SomeImage"> 
 
</div>

aber ich kann nicht herausfinden, wie man mit der Bildhöhe zu übersetzen. Ich möchte, dass das Scrollen stoppt, sobald der untere Teil des Bildes sichtbar ist. Ich weiß nicht, wie groß das Bild vorher sein wird, also kann ich es nicht in CSS fest codieren. Deshalb habe ich versucht, den Stil in JavaScript zu setzen, aber das hat bei mir nicht funktioniert (siehe den auskommentierten Code).

Meine Frage: Wie bekomme ich das Bild, um bei Mouseover ganz nach unten zu scrollen, und höre auf zu scrollen, wenn der untere Teil des Bildes erreicht ist? Ich kann auch nicht über die Höhe scrollen, sonst bekomme ich hässlichen weißen Raum. Ich versuche, dies in reinem JavaScript, ohne jQuery zu tun. Wer kann helfen?

Answer 1

Mit reinem CSS Sie Prozent Einheit im übersetzen verwenden können, dann die Höhe des Behälters subtrahieren werden täglich Offset (Position absolut):

div { 
 
    height: 200px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.myImage { 
 
    transition: all 3s ease-in-out; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
} 
 

 
.myImage:hover { 
 
    top: 100%; 
 
    transform: translateY(-100%); 
 
}

<div> 
 
    <img src="https://placeimg.com/300/800/any" class="myImage" alt="SomeImage"> 
 
</div>

jsFiddle: https://jsfiddle.net/azizn/h37dLzgf/1/

Answer 2

Der auskommentierte Code fehlt "px"

element.style.transform = "translate(0,-" + element.naturalHeight + "px)"; 
element.style.mozTransition = "translate(0,-" + element.naturalHeight + "px)"; 
element.style.msTransform = "translate(0,-" + element.naturalHeight + "px)"; 
element.style.oTransform = "translate(0,-" + element.naturalHeight + "px)"; 
element.style.webkitTransform = "translate(0,-" + element.naturalHeight + "px)";