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.
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 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.
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 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.
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.
How to center image horizontally within a div element?
#artiststhumbnail a img {
display:block;
margin:auto;
}
Here's my solution in: http://jsfiddle.net/marvo/3k3CC/2/
Related Topics
How to Remove The Previously Selected Option from a Drop-Down Menu in a Table
Force <A Download /> to Download Image Instead of Opening Url Link to Image
Tools for Obfuscating HTML and CSS
Difference Between Onblur and Onchange Attribute in HTML
How to Pre-Populate HTML Form Input Fields from Url Parameters
How to Hide/Show a Div When a Button Is Clicked
Meta Viewport Just on Portrait
Equivalent to Float in Outlook
Offline iOS Web App: Loads My Manifest, But Doesn't Work Offline
How to Wrap Text Around a Non Rectangular Image
Anchor <A> Tags Not Working in Chrome When Using #
Height: 100% for <Div> Inside <Div> with Display: Table-Cell
Remove .HTML and .PHP Extensions with .Htaccess