show images of different dimension in center of a div of fixed size

Question

I am grabbing news from different website & want to show them as show as example

Problem is with the image, Images associate with articles are of different dimension.

I have an image container 'div' of 80x80 pixels and i want to display image in center both vertically & horizontally

I want to show image in best possible way ...

I would appreciate help in this regarding or how i show image in best possible way without hurting the design.

<div class="news-wrapper">
    <div class="news-image"><img class="img" src="http://gulfnews.com/media/img/gulfnews_logo.png"/></div>
     <div class="news-title"> News Title 1</div>
     <div class="news-source"> Source 1</div>
     <div class="news-description"> Some Descriptionn</div>
</div>
<div class="news-wrapper">
    <div class="news-image"><img class="img" src="http://i.cdn.turner.com/cnn/.e/img/3.0/global/header/intl/hdr-globe-central.gif"/></div>
     <div class="news-title"> News Title 1</div>
     <div class="news-source"> Source 1</div>
     <div class="news-description"> Some Descriptionn</div>
</div>
<div class="news-wrapper">
    <div class="news-image"><img class="img" src="http://news.bbcimg.co.uk/media/images/65881000/jpg/_65881249_65881241.jpg"/></div>
     <div class="news-title"> News Title 1</div>
     <div class="news-source"> Source 1</div>
     <div class="news-description"> Some Descriptionn</div>
</div>
<div class="news-wrapper">
    <div class="news-image"><img class="img" src="http://www.zawya.com/images/cia/large/130213070447ptjw.jpg"/></div>
     <div class="news-title"> News Title 1</div>
     <div class="news-source"> Source 1</div>
     <div class="news-description"> Some Descriptionn</div>
</div>

Check out http://stackoverflow.com/questions/7273338/how-to-properly-vertically-align-an-image — Raad, Feb 14 '13 at 14:05

Milche Patern · Answer 1 · 2013-02-14T13:38:16.240

if your images are relatively around 80 x 80 pixels, just apply them has a background of your cell. This way it will always be centered .. never overflow .. etc etc.

<div class="news-wrapper">
    <div class="news-image" style="background-image:url('http://www.zawya.com/images/cia/large/130213070447ptjw.jpg';"></div>
     <div class="news-title"> News Title 1</div>
     <div class="news-source"> Source 1</div>
     <div class="news-description"> Some Descriptionn</div>
</div>

.news-image {
    width:80px;
    height:80px;
    background-attachment:scroll;
    background-color:transparent;
    background-position:50% 50%;
    background-repeat:no-repeat
}

dinodsaurus · Accepted Answer · 2013-12-16T14:30:07.053

3

You need to position:absolute your images and position:relative yourr news-wrapper and then give top:0;bottom:0;margin:auto to your image. I edited your fiddle and you can check it here jsFiddle

edited Dec 16 '13 at 14:30

answered Feb 14 '13 at 13:45

dinodsaurus

4,937
4
19
24

starikovs · Answer 3 · 2013-02-14T14:20:26.200

To align an image vertically in the middle, try to set line-height equal to height for the container and set dispaly inline-block with "vertical-align middle" for the image. To align horizontally, just set "text-align center" for the image container.

.image-container {
     text-align: center;
     line-height: 80px; /* equals to container height */
}
img {
    display: inline-block;
    vertical-align: middle;
}

Here's modified sample in jsfiddle

show images of different dimension in center of a div of fixed size

3 Answers3