CSS - Resize image in IE losing resolution (aliasing)

Question

I have a layout that resizes my images! But I am facing problem of aliasing in Internet Explorer (v.11). I tried some fixes but no success! What can I do to troubleshoot?

enter image description here

CSS

li > img.frdImage {
    position: relative;
    margin-top:-25px;
    top:50%;
    float:left;
    margin-left:5px;
    border-radius: 50%;    
    width:50px;
    height:50px;
}

jsFiddle: HERE (please open using internet explorer)

score 0 · Answer 1 · answered Feb 09 '14 at 18:01

0

Use a PHP Image Resize script
Here's an example from PHP.net:

<?php
// File and new size
$filename = 'test.jpg';
$percent = 0.5;

// Content type
header('Content-Type: image/jpeg');

// Get new sizes
list($width, $height) = getimagesize($filename);
$newwidth = $width * $percent;
$newheight = $height * $percent;

// Load
$thumb = imagecreatetruecolor($newwidth, $newheight);
$source = imagecreatefromjpeg($filename);

// Resize
imagecopyresized($thumb, $source, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);

// Output
imagejpeg($thumb);
?>

Else check this link out:

http://www.verot.net/php_class_upload_samples.htm

And use HTTP_USER_AGENT so that it only resizes when the specified browser is in use

<?php
$u_agent = $_SERVER['HTTP_USER_AGENT'];

//First get the platform
if (preg_match('/linux/i', $u_agent)) {
    echo 'linux';
}
?>

Hope it helped

answered Feb 09 '14 at 18:01

Marcus Schack-Abildskov

80
6

Or take the `HTTP_USER_AGENT` and instead of echoing out the `linux` then make the CSS part there – Marcus Schack-Abildskov Feb 09 '14 at 18:07
It is not necessary php engaged friend, the browser must get the result we want! - Thank you – Igor Feb 09 '14 at 18:09
Found the solution: `!--[if !IE]> ` or take a look at another stackoverflow post: http://stackoverflow.com/questions/13785587/if-ie-not-working – Marcus Schack-Abildskov Feb 09 '14 at 18:11
Hope it fixed the problem :) – Marcus Schack-Abildskov Feb 09 '14 at 18:13
That depends on js dont only css. Thanks a lot – Igor Feb 09 '14 at 18:16
It can also be used for CSS, just use the `` tag instead of ` – Marcus Schack-Abildskov Feb 09 '14 at 18:17
Is not that friend. Thx – Igor Feb 09 '14 at 18:33

CSS - Resize image in IE losing resolution (aliasing)

1 Answers1