...

View Full Version : problem with chrome distorting pictures



Partizan
02-19-2009, 10:14 PM
EDIT: Seems ok if I specify width and height in px and not % so I will go with this...

Hi,

Something I just noticed.

In chrome pictures at the bottom of this page are streched and squashed out and although look kind humourous are not what I wanted...

http://www.minifigtimes.com/

It is fine in IE and FX hence I didnt notice till now.

Problem is likely related to the fact that I have a larger pic (253x194) that I was trying to resize in CSS although in this case I left it at 100% and IE and FX seems to have auto-resized it to fit in a DIV. Chrome hasn't however.

These are my codes:


/* THREE IMAGES AND STORY LINKS */

#subwrapper{
margin: 0 0 0 0; /* above left below right */
padding: 0;
border:0px solid #f00; /*diagnostic*/
overflow:auto; /*these two lines*/
width:75%; /*uncollapse the box*/
}


#subwrapper div{
margin: 0; /* above left below right */
padding:0px;
border:0px solid #f00; /*diagnostic*/
width:25%; /*sets the column width as a percentage of #subwrapper*/
float:left;
}

#subwrapper img{
width: 100%;
height: 100%;

}

#subwrapper .mid {
margin: 0 5%;
}

/* THREE IMAGES AND STORY LINKS - END */


HTML


<div id="subwrapper" class="story-headline">
<div>
<img src="http://www.minifigtimes.com/images-2009/news/2009-02-14-p1.png" alt="test">
<p>
Gap tightens at top as leaders held by Torino

<a href="http://www.minifigtimes.com/news/2009/2009-02-14-story01.shtml" class="link-blue">Read</a>
</p>

</div>

<div class="mid">

<img src="http://www.minifigtimes.com/images-2009/news/2009-02-09-p1.png" alt="test">
<p id="subbody">
February 11th Declared A Public Holiday

<a href="http://www.minifigtimes.com/news/2009/2009-02-09-story01.shtml" class="link-blue">Read</a>
</p>


</div>

<div>
<img src="http://www.minifigtimes.com/images-2009/news/2009-02-07-p1.png" alt="test">
<p>
LFC comeback ends Napoli's record unbeaten run

<a href="http://www.minifigtimes.com/news/2009/2009-02-07-story01.shtml" class="link-blue">Read</a>
</p>
</div>
</div> <!-- sub wrapper Div end -->

Excavator
02-20-2009, 01:37 AM
In chrome pictures at the bottom of this page are streched and squashed out and although look kind humourous are not what I wanted...

Images in percentage widht/height can easily get skewed out of proportion. Look at this resizing background image http://nopeople.com/CSS/background_image_resize/index.html and look what happens to it when you resize your browser to a rectangle shape.

Partizan
02-20-2009, 09:42 AM
Yes, this isnt very good, unless it is desired for some reason..



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum