1

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.

OwenCraddock
  • 63
  • 1
  • 2
  • 6

2 Answers2

2

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.

  • I dont know if I did anything wrong but its not working... do I have to have the .gif and the end of the image name? – OwenCraddock Mar 11 '15 at 01:08
  • no, first go to the image, in html, and write as an attribute `id="name-this-what-ever-you-want"` then, in the CSS, instead of writing `image`, write down `#name-this-what-ever-you-want` and that should work –  Mar 11 '15 at 01:10
  • don't add anything else, no `.gif` or anything, just what I told you as a selector. –  Mar 11 '15 at 01:12
  • where would I add the id if the image is inside a image src= thing? Im really sorry that I dont know this – OwenCraddock Mar 11 '15 at 01:16
  • `` –  Mar 11 '15 at 01:20
  • The image ends up smaller than half my fingernail. What went wrong? – OwenCraddock Mar 11 '15 at 01:28
  • can you show the exact html and css you utilized, I would prefer it if it was posted right here, without external sources –  Mar 11 '15 at 01:32
  • ``

    ``     – OwenCraddock Mar 11 '15 at 01:36
  • I have no idea how to make it all pretty like you do – OwenCraddock Mar 11 '15 at 01:37
  • `` has the source sk1giflogo.gif, but it's not enough, where exactly is this image? google.com/sk1giflogo.gif? or where else? By the way, to format the text inside a comment, look at the right of the comment box, there the blue text that say *help*, click there to see how to format text. –  Mar 11 '15 at 01:39
  • The image is in the same folder as all this websites files. What do you mean by "not enough"? – OwenCraddock Mar 11 '15 at 01:43
  • Is it in http://pastebin.com/sk1giflogo.gif? Because there seems to be no image there? Where is this image stored? –  Mar 11 '15 at 01:46
  • The image is stored on my computer, in a folder, on my desktop, with my html file and other pictures and all – OwenCraddock Mar 11 '15 at 01:47
  • Ok, then I can't see it. Images can only be seen if they are on the web. If they are in a local file(your computer), I can't see them at all. Anyways, I'm going to use a simple `
    `. If there is no image, I might have to work without it.
     –  Mar 11 '15 at 01:49
  • Okay thnaks, I have to go, we can talk about this tommorrow – OwenCraddock Mar 11 '15 at 01:51
  • This is perfect. Worked perfect. Thank you so much! – OwenCraddock Mar 11 '15 at 23:07
0

Create a div class or id where you want the image be.

Then, add something like background: url("imageName.gif") 0 0 contain to your CSS to make this image resize to fit the div completely.

Here is an example with JSFiddle.

shaun
  • 1,017
  • 11
  • 22