distorted images in blogspot when using chrome

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

Pregunta

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,

¿Fue útil?

Solución

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;
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top