Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Omar Suriel
5,403 PointsHow to center image thats bigger than its container and is using overflow to hide the rest of the image?
How to center image thats bigger than its container and is using overflow: hidden to hide the rest of the image?
i have an <img> thats bigger than its container, have the width set at max-width:100 but the image is too long and I cant have it be more than 400px long. so I set the container overflow value to hidden to crop out the rest of the image that makes it to long and it fits perfectly except that it is not centered and i need to be. kind of like when you use the background-size: cover for a background.
setting the image as a background will not work, because I am using a javaScript plug in that requires the image to be in <img> tags.
thank you!
My code:
img-contaier {
width: 100%;
max-height: 350px;
background: pink;
display: block;
position: relative;
margin-top: 20px;
overflow: hidden;
}
image {
width: 100%; }
Now i need the image to be center on that container. thanks!
Omar Suriel
5,403 PointsYes, I need to center it vertically
Jason Anello
Courses Plus Student 94,610 PointsCan your container be set to a height of 350px? Or does it need to be max-height because it could get smaller in height?
Rohit Ukirde
10,453 PointsHi , Can you share your html and css code please.
Omar Suriel
5,403 PointsI can set it to height: 350px instead of max-height. i actually did in order to try to use absolute positioning but it is still not helping me center it.
my html: is
<div id="slider-img"> <img id="image-show" src="slider/1.jpg"> </div>
My css is:
slideshow {
width: 100%;
height: 375px;
background: pink;
display: block;
position: relative;
margin-top: 20px;
overflow: hidden;
}
image-show {
width: 100%; position: absolute; }
1 Answer
Jason Anello
Courses Plus Student 94,610 PointsHi Omar,
If you can keep that height and use css transforms then you could center it vertically by translating it in the y direction.
I came across this page: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
The css for you could be
#image-show {
width: 100%;
position: relative;
top: 50%;
transform: translateY(-50%);
}
and the parent container doesn't need position: relative
Here's a codepen demo illustrating the basic idea http://codepen.io/anon/pen/aJJWKm
The idea is that you move the top of the image 50% down the height of the container. Then you translate it upwards half the height of the image. This would work very similarly to how a background-position of 50% would work if this were a css background image.
Omar Suriel
5,403 Pointsthanks a lot!!! thats exactly what I was looking for. im not familiar the the transform property. but thanks a million, now i iknow!!!
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsAll of it is showing in the horizontal direction, correct?
And you need it centered in the vertical direction?