title: distorted images in blogspot when using chrome
body: <p>I have added to a blogspot blog a page with a gallery of images: <a href="http://fotojagd.blogspot.co.at/p/fotogalerie-herbst.html" rel="nofollow">here</a>.</p>
  
  <p>in chrome some of the images are distorted(vertical format images) - in firefox everything looks fine:</p>
  
  <pre><code>    &lt;?xml version="1.0" encoding="UTF-8"?&gt;
      &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
      &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
      &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta name="generator" content="Bluefish 2.2.2" /&gt;
      &lt;meta name="author" content="" /&gt;
      &lt;meta name="date" content="2013-01-20T10:35:50+0100" /&gt;
      &lt;meta name="copyright" content=""/&gt;
      &lt;meta name="ROBOTS" content="NOINDEX, NOFOLLOW"/&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"/&gt;
      &lt;meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"/&gt;
      &lt;meta http-equiv="content-style-type" content="text/css"/&gt;
      &lt;meta http-equiv="expires" content="0"/&gt;
      &lt;meta /&gt;
      &lt;/head&gt;
  
      &lt;style type="text/css"&gt;
  
      table {
       text-align: center;
      }
  
      td {
       margin-top: 4;
       margin-bottom: 4;
       margin-left: 4;
       margin-right: 4;
      }
  
      img {
       height: 85%;
       width: 85%;
  
      }
      &lt;/style&gt;
      &lt;body&gt;
      &lt;div id='galleryWinter'&gt;
  
      &lt;table vertical-align:middle; horizontal-align:middle&gt;
  
      &lt;tr&gt;
      &lt;td&gt;
      &lt;a href="http://www.istockphoto.com/stock-photo-19712275-virginia-creeper-in-fall.php?st=ee2d438" target="_parent" name="Wilder Wein"&gt;
      &lt;img src="http://i.istockimg.com/file_thumbview_approve/19712275/2/stock-photo-19712275-virginia-creeper-in-fall.jpg" alt="Wilder Wein" /&gt;
      &lt;/a&gt;
      &lt;h3&gt;Wilder Wein&lt;/h3&gt;
      &lt;/td&gt;
      &lt;td&gt;
      &lt;a href="http://www.istockphoto.com/stock-photo-19792446-virginia-creeper-in-fall.php?st=ee2d438" target="_blank" name="Wilder Wein"&gt;
      &lt;img src="http://i.istockimg.com/file_thumbview_approve/19792446/2/stock-photo-19792446-virginia-creeper-in-fall.jpg" alt="Wilder Wein" longdesc="Wilder Wein" /&gt;
      &lt;/a&gt;
      &lt;h3&gt;Wilder Wein&lt;/h3&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
  .
  .
  .(the code for the other images and links)
  </code></pre>
  
  <p>As you can see I have put the images into a table. What do I need to do, that the vertical format images are not distorted in chrome (expanded to the width of the table cell). </p>
  
  <p>Looking forward to your answers, </p>