How would you resize a image/gif in either CSS or HTML?

Tags: html,css,image,resize,gif

Problem :

How would you resize a image/gif in either CSS or HTML? I want the image to still be proportional and I want the gif to be about the size of the google logo on google.com, how would I do that?

CSS or HTML is fine.

---

Solution :

Now the original google.com logo image is 269 x 95. And we know the original image height and width, 1692x396.

if you want this image to be that exact same size, you'll have utilize the css calc().

Knowing that you're new to the web world I'm gonna try to explain it as hard as I can. calc() stands for calculation. HTML is the content of a webpage, such as text and images, and CSS is the styles, such as color, size, and position.

That will select it. Now get the ration of the width you have to the width you want, so 1692/269, and the same with height.

Now we have everything ready and we write:

image {
  width: calc(1692px / 269);
  width: -moz-calc(1692px / 269);
  height: calc(396px / 95);
  height: -moz-calc(396px / 95);
}

This will stretch the picture to the size you needed. If you were wondering what the -moz- things were, they pretty much say that the same, the only difference is that because calc() is not really supported, it will solve that problem for you.

#logo {
  width: calc(1692px / 269);
  width: -moz-calc(1692px / 269);
  height: calc(396px / 95);
  height: -moz-calc(396px / 95);
}

<image src="https://www.google.com/images/srpr/logo11w.png" id="logo">

Because you don't know much about codeing, you can go to the following pages to learn more:

http://www.w3schools.com/

http://www.codecademy.com/learn

Thank you!

UPDATE

I have forgotten that we were talking only about an image. I confused it with the relative size of the parent, and I screwed up.

Anyways, to make it simple, just do:

image {
  width: 269px;
  height: 95px;
}

And that is it. Forget about everything I said earlier.