CSS Dimensions that still allow gifs?

[sincats]

We have an active social network in which users can create accounts, upload images, etc. They create an avatar and that serves as their main user image which appears on all post (pretty standard stuff).

However recently we have received a request regarding animated avatars. The problem is that we use ‘style=“width:150px;” height=“200px;” />’ to force the image to the height/width that we need in order to keep the site uniformed.

With animated gifs this will only show the first frame.

Does anyone have an example of how we can maintain the same dimensions yet still show the full animation?

Thanks!

[ronpat]

The style should not be part of the problem (except, perhaps, that it has errors).

Please post an example of an animated gif that only shows the first frame in your code but loops continuously outside of your code.

Normally, such issues occur because the .gif was not saved to loop continuously; not by flaky code.

[coothead]

Hi there sincats,

as @ronpat has pointed out the problem may be elsewhere.

Here is a “150x200-animated.gif” for you to test…

coothead

[coothead]

Hi there sincats,

you should also be aware that, like other images, an
animated gif can be coded to fit it’s parent container.

For example…

HTML

<div id="animated-gif-container">
 <img src="150x200-animated.gif" width="150" height="200" alt="">
</div>

CSS

<style>
#animated-gif-container {
    width: 100px;
    height: 100px;
 }
#animated-gif-container img {
    display: block;
    width: 100%;
    height: 100%;
 }
</style>

coothead

[sincats]

Thank you! This is exactly what I needed. Really appreciate your advice.

[coothead]

 
 
            No problem, you’re very welcome.

coothead