Note that there are some explanatory texts on larger screens.

plurals
  1. POshow images of different dimension in center of a div of fixed size
    primarykey
    data
    text
    <p>I am grabbing news from different website &amp; want to show them as show as <a href="http://jsfiddle.net/r55Er/1/" rel="nofollow">example</a> </p> <p><a href="http://jsfiddle.net/r55Er/1/" rel="nofollow">http://jsfiddle.net/r55Er/1/</a></p> <p>Problem is with the image, Images associate with articles are of different dimension.</p> <p>I have an image container 'div' of 80x80 pixels and i want to display image in center both vertically &amp; horizontally</p> <p>I want to show image in best possible way ... </p> <p>I would appreciate help in this regarding or how i show image in best possible way without hurting the design.</p> <pre><code>&lt;div class="news-wrapper"&gt; &lt;div class="news-image"&gt;&lt;img class="img" src="http://gulfnews.com/media/img/gulfnews_logo.png"/&gt;&lt;/div&gt; &lt;div class="news-title"&gt; News Title 1&lt;/div&gt; &lt;div class="news-source"&gt; Source 1&lt;/div&gt; &lt;div class="news-description"&gt; Some Descriptionn&lt;/div&gt; &lt;/div&gt; &lt;div class="news-wrapper"&gt; &lt;div class="news-image"&gt;&lt;img class="img" src="http://i.cdn.turner.com/cnn/.e/img/3.0/global/header/intl/hdr-globe-central.gif"/&gt;&lt;/div&gt; &lt;div class="news-title"&gt; News Title 1&lt;/div&gt; &lt;div class="news-source"&gt; Source 1&lt;/div&gt; &lt;div class="news-description"&gt; Some Descriptionn&lt;/div&gt; &lt;/div&gt; &lt;div class="news-wrapper"&gt; &lt;div class="news-image"&gt;&lt;img class="img" src="http://news.bbcimg.co.uk/media/images/65881000/jpg/_65881249_65881241.jpg"/&gt;&lt;/div&gt; &lt;div class="news-title"&gt; News Title 1&lt;/div&gt; &lt;div class="news-source"&gt; Source 1&lt;/div&gt; &lt;div class="news-description"&gt; Some Descriptionn&lt;/div&gt; &lt;/div&gt; &lt;div class="news-wrapper"&gt; &lt;div class="news-image"&gt;&lt;img class="img" src="http://www.zawya.com/images/cia/large/130213070447ptjw.jpg"/&gt;&lt;/div&gt; &lt;div class="news-title"&gt; News Title 1&lt;/div&gt; &lt;div class="news-source"&gt; Source 1&lt;/div&gt; &lt;div class="news-description"&gt; Some Descriptionn&lt;/div&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload