Image centering and sizing with CSS [duplicate] - html

Question

This question already has answers here:
Horizontal center dynamic image in div with absolute position
(2 answers)
Closed 8 years ago.
I want to have a page which displays an image as large as possible but with the whole image in view, without changing the proportions of the image, and centred on the page (i.e. full height with borders either side, or full width with borders top and bottom). Is there a way to do this purely in CSS? I've tried various combinations of width/height/min-width/min-height properties and can't get it to display as I'd like.
I also want to be able to overlay a link that consists of a div with a background image, which changes on hover, the code for which is below. I want this to be positioned at the top right of the image:
HTML:
<div class="imagecontainer">
<img src='gallery/images/<?php echo $image;?>' max-height="100%" width="100%"/>
<div class="backbuttoncontainer">
<a class="gallerybackbutton" href="gallery/index.htm"></a>
</div>
</div>
CSS:
.imagecontainer{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.backbuttoncontainer{
text-align:right;
margin-top: 10px;
margin-right: 10px;
height: 38px;
width: 100%;
display: block;
}
.gallerybackbutton{
background: url('icons/back_to_gallery.png') bottom;
display: inline-block;
height: 28px;
}
.gallerybackbutton:hover{
background-position: 0 0;
}

Answer 1

perhaps this is what you want : JSFIDDLE, here's how:
create a container for the image in any dimension you want (200x200 or 400x200 or 200x400 ), then put the image inside the container, with style
vertical-align: middle // to make your image centered vertically, but it's relative to the inline element, so if you don't have any text or set line-height for it's siblings, it doesn't work
max-width: 200px; // or your container width
max-height: 200px; // or your container height
// this style is used for my example with the container max-width and max-height set to 200px
then in the container add this style
text-align: center; // to make it centered horizontally
width: 200px; // for example
height: 200px; // for example
border: 1px solid red; // only to show the container in this example
line-height: 200px; // this will make the inline element in the center from 200px, or so
or another method by using pseudo element in this JSFIDDLE, you need to make a container and the image that going to be centered :
<div class="block">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/background-wallpapers-7.jpg" class="centered" />
</div>
add pseudo element to the container block
.block:before {
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; // to remove the spacing that's created by inline-block
}
and add style for the image that's going to be centered
.centered {
display: inline-block;
vertical-align: middle;
max-width: 100%;
max-height: 100%;
}
here's the explanation from css tricks: centering in the unknown

Answer 2

To use margin: auto you have to have a static width.
But your Image is a pixel image and will have that static width.
Just set your width of image and margin to auto:
.backbuttoncontainer{
margin:auto;
height: 38px;
width: 100px;
}

Answer 3

set image as background and try the following code
class-name{
background:url('1.jpg') no-repeat center center fixed ;
width:100%;
height:auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size:cover;
background-size: cover;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='1.jpg',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='1.jpg',sizingMethod='scale')";