distorted images in blogspot when using chrome

StackOverflow https://stackoverflow.com/questions/14536196

Domanda

I have added to a blogspot blog a page with a gallery of images: here.

in chrome some of the images are distorted(vertical format images) - in firefox everything looks fine:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title></title>
    <meta name="generator" content="Bluefish 2.2.2" />
    <meta name="author" content="" />
    <meta name="date" content="2013-01-20T10:35:50+0100" />
    <meta name="copyright" content=""/>
    <meta name="ROBOTS" content="NOINDEX, NOFOLLOW"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"/>
    <meta http-equiv="content-style-type" content="text/css"/>
    <meta http-equiv="expires" content="0"/>
    <meta />
    </head>

    <style type="text/css">

    table {
     text-align: center;
    }

    td {
     margin-top: 4;
     margin-bottom: 4;
     margin-left: 4;
     margin-right: 4;
    }

    img {
     height: 85%;
     width: 85%;

    }
    </style>
    <body>
    <div id='galleryWinter'>

    <table vertical-align:middle; horizontal-align:middle>

    <tr>
    <td>
    <a href="http://www.istockphoto.com/stock-photo-19712275-virginia-creeper-in-fall.php?st=ee2d438" target="_parent" name="Wilder Wein">
    <img src="http://i.istockimg.com/file_thumbview_approve/19712275/2/stock-photo-19712275-virginia-creeper-in-fall.jpg" alt="Wilder Wein" />
    </a>
    <h3>Wilder Wein</h3>
    </td>
    <td>
    <a href="http://www.istockphoto.com/stock-photo-19792446-virginia-creeper-in-fall.php?st=ee2d438" target="_blank" name="Wilder Wein">
    <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" />
    </a>
    <h3>Wilder Wein</h3>
    </td>
    </tr>
.
.
.(the code for the other images and links)

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).

Looking forward to your answers,

È stato utile?

Soluzione

Force the image heights to be auto instead of the 85% that you've set globally to every image on the page:

Css:

#galleryWinter img{
height: auto !important;
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top