Personal I have an image that I bring from the database and put it in an IMG tag in the size of 960px by 480px. I need to resize it to 470x160. I need it to be resized by length, and the height left over is trimmed, but out of the center. See the image below:
I need to discard the two gray bands.
Can you do this in CSS3 or JQuery? If so, how?
Thank you
Hello, check out this link to see if this was the desired result. This is the code:
$("img").hover(function(){
$(this).toggleClass("img-zoom");
});div{
position: relative;
overflow:hidden;
width:470px;
height:160px;
}
img{
position: relative;
top: -50%;
margin-top: 40px;
width:100%;
-webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out;
}
.img-zoom { -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2);
}<div>
<img src="http://i.stack.imgur.com/sKByS.jpg"alt="img" />
</div> One solution would be to use the transform statement in the image:
div{
position: relative;
overflow:hidden;
width:470px;
height:160px;
}
img{
position: relative;
top: 50%;
transform: translateY(-50%);
width:100%;
}<div>
<img src="http://i.stack.imgur.com/sKByS.jpg"alt="img" />
</div>In this way, you have a container for the image that defines the width and height you want to get.
The image gets the width of this container, the transform statement will center the image on that container and the top / bottom of the image will be hidden because the container has overflow hidden.