Center an Image in a Div Too Small for It

Center a large image of unknown size inside a smaller div with overflow hidden

What about this:

.img {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
}

This assumes that the parent div is positioned relatively. I think this works if you want the .img relatively positioned rather than absolutely. Just remove the position: absolute and change top/left to margin-top and margin-left.

You'll probably want to add browser support with transform, -moz-transform etc.

Center an image in a div too small for it?

One option would be to absolutely position the image with left: 50% and then use a negative margin-left on the image equal to half of the image's width. Of course, this requires the containing div to have its positioning set to relative or absolute in order to provide the proper container type for the image to be absolutely positioned within.

The other option (and probably better) is instead of using an image tag, just set the image as the background for the parent div, and use the background positioning CSS attributes to center it. Not only does this make sure it's centered without forcing absolute positioning, but it also automatically crops overflow, so the overflow attribute isn't necessary.

Aligning image to center inside a smaller div

See: http://jsfiddle.net/thirtydot/x62nV/ (and without overflow: hidden to easily see the centering)

This will work in all browsers, with the possible exception of IE6.

For .imageContainer > span, the margin-left is derived from the width, and the width is an arbitrary number which controls the maximal image width that will be supported. You could set width: 10000px; margin-left: -4950px; to support really wide images, if required.

HTML:

<div class="imageContainer">
<span><img src="http://dummyimage.com/100x100/f0f/fff" /></span>
</div>

CSS:

.imageContainer {
border: 1px solid #444;
overflow: hidden;
width: 100px;
height: 100px;
margin: 15px;
text-align: center;
}
.imageContainer > span {
display: block;
width: 1000px;
margin-left: -450px; /* -(width-container width)/2 */
}
.imageContainer > span > img {
display: inline-block;
}

Center img inside smaller div not working as intended

Thanks to Abhitalks I found the problem I had with the flexbox. I've adapted the codepen so that it works with flexbox now.

For everyone who's seeking a solution to this, this is what your markup should be like:

HTML

<div class="container">
<img src=""/>
</div>

CSS

.container {
display: flex;
justify-content: center;
width: 50%; /* may have any percentage */
height: 100%; /* this is needed so that there will be no border at the bottom of the picture if window is resized */
overflow: hidden;
float: left; /* this can be left out if there is no textbox on the right side */
}

img {
min-width: 100%;
min-height: 100%;
}

Happy coding!

center a big image in smaller div

Here is the trick. It is easy to center the image horizontally. However the vertical centering is not so easy and involves more markup. You may use background-position property. Here is jsfiddle http://jsfiddle.net/krasimir/ydzZN/2/

HTML

<div class="thumbnail">
<a href="#" style="background-image: url('http://www.australia.com/contentimages/about-landscapes-nature.jpg')">
</a>
</div>

CSS

div.thumbnail {
display: block;
margin: auto;
height: 100px;
width: 100px;
overflow: hidden;
position: relative;
}
div.thumbnail a {
display: block;
width: 100%;
height: 100%;
background-position: center center;
}

There is a bad effect of course. Your image will not be indexed, because it is in a css style.

How to make an image center (vertically & horizontally) inside a bigger div

Personally, I'd place it as the background image within the div, the CSS for that being:

#demo {
background: url(bg_apple_little.gif) no-repeat center center;
height: 200px;
width: 200px;
}

(Assumes a div with id="demo" as you are already specifying height and width adding a background shouldn't be an issue)

Let the browser take the strain.

Force an image to ALWAYS stay at the middle of a div

Using this centering trick should give you what you want:

img {
position:relative; (or absolute, it depends on your needs)
top:50%;
left:50%;
transform:translate(-50%, -50%);
}

This keeps the image centered no matter the size of the container it is in. It doesn't resize the image though. Based on that pic you out it seems like you didn't want that.



Related Topics



Leave a reply



Submit