3

How to align cropped image from both sides to the center, which also is scaled to its height? Or just center cropped image? (see 4, 5 in http://jsfiddle.net/iegik/ZzXru )

 |//////////|
 |----------|   ----------------   ------------
 |          |   |/|          |/|   |          |
 |scaled by |   |/|scaled by |/|   |  empty   |
 |  width   |   |/|  height  |/|   |   div    |
 |          |   |/|          |/|   |          |
 |----------|   ----------------   ------------
 |//////////|

or

 -------------- 
|//////////////|
|//----------//| 
|/|          |/|
|/|   just   |/|
|/| cropped  |/|
|/|          |/|
|//----------//| 
|//////////////|
 --------------
iegik
  • 1,429
  • 1
  • 18
  • 30

2 Answers2

2

If you don't have to support IE8 or lower you could do it this way. Change the style attribute instead of using image elements.

figure {
     display: block;
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
}

<figure style="background-image:url(http://placekitten.com/250/300)"></figure>

This lets the image be centered, fill the container, and you won't have to worry about landscape vs. portrait. The image's aspect ratio will be preserved. If you want to see the whole image but with gaps on one side or the other, use "background-size: contain".

Miriam Salzer
  • 1,242
  • 1
  • 12
  • 16
1

Actually this is real tricky, it's more tricky because the image sizes are different, you can check this nice article here on this subject...

If you want to center each image manually you can do it like this

.img {
   position: absolute;
   width: 200px;
   height: 200px;
   left: 50%;
   top: 50%; 
   margin-left: -100px; /* Half of your image width */
   margin-top: -100px;  /* Half of your image height */
}

Don't forget to make your container div to position: relative;

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
  • Thanks, seems to be in my example, positioning also relatives to image width and container height. Looks like need add some JavaScript on element when it loads. (want something independent on size) – iegik Nov 02 '12 at 19:07
  • That article is independent on size, just check that article – Mr. Alien Nov 02 '12 at 19:08
  • No, It`s not. When "max-width:100%;" is set for image - it will automatically resizes to container width, so it`s visual size will changes and without JavaScript help there is no solution for that. – iegik Nov 30 '12 at 12:54