使图像居中而不使用CSS拉伸和调整大小

Question

I was trying to bring the position of images inside div to center in a gallery. look at the following link http://geeksdoor.in/ghouri/portfolio.php

.gallery-item, .grid-sizer {
    width:25%;
    height:200px;    
    display:block; 
    position:relative;
    overflow:hidden; 
}

.gallery-item img, .grid-sizer img {
    position:relative;
    top:0;
    left:0; 
    width:100%;
    max-height:100%;
    display: block;
    overflow:hidden;
    z-index:1;
}

and in this page http://geeksdoor.in/ghouri/portfolio-single.php?type=int&imgnumb=0

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background-size: cover; */
background-attachment: scroll;
background-position: center;
background-repeat: no-repeat;
background-origin: content-box;

the 1st image is good and other images in slider are getting stretched.

please help if there is any wrong in the CSS!! and Thanks in advance guys.

Answer 1

First of all, please compress your images. I'm loading images of 4 megabytes, which absolutely destroys performance and eats through your mobile data bundle.

Secondly, it's probably better to resize your images up front to prevent weird stretching and deforming. Adding CSS now would only mess up your images because they are in no way fit to fit in your containers.

Answer 2

Unfortunately, the pictures doesn't even load with my poor internet connection. Maybe you could use tinyjpg to compress your images.

But maybe try width: 100% and height: auto;? Or, if it is an option, try it using jquery.

Answer 3

You need to resize your images to a standard size, so that all your images can be in a same size and resolution..

For you portfolio i can suggest the size of (1980px X 960px) .. and use the "background-position: center;" property so that you can easily align in tablet and mobile screen sizes, by just setting the height of the div as per your image visibility..

Hope it helped you..