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.


    CSS Howto..

    How to remove background color from reply of html email template in Outlook 2010/2013

    How to css 3rd li in hierarchy?

    How do I apply the “outline” CSS property with JavaScript?

    How to add TITLE and ALT to an background image (CSS Sprites)?

    how do I create unique looking angular ui bootstrap dialogs

    how to use tinymce content.css in rails

    How to add a css class into my function

    How to centering a form

    How to apply CSS to 2x2 classes?

    How to use this CSS rule for divs? [JSFiddle]

    How to make a full page JS and CSS menu

    How to get a table-cell aligned to the right?

    How to get and extract matched css rules on dom-node?

    CSS: How to position divs 2 by 2

    How can I position an element in the middle of the window while using position: absolute?

    How to align the bottom of two left- and right aligned texts with bottom of parent container?

    How to reset the input css to the defaults in Bootstrap 3.2

    How to make the effects of jQuery's $(element).css() persistent?

    How to reset CSS3 *-transform: translate(…)?

    How to position an absolute div next to an element in a scrollable section, but outside the section

    I have a nav bar that changes the src of an iframe, how can i change the active link color?

    How do I get form-groups to overlap?

    How to handle this CSS issue with Wordpress?

    How to get all select element in JQuery

    How can I make responsive JQuery left margin?

    How to get actual (not original) height of a CSS-rotated element

    How can I keep the hovered menu item open so I can edit it's style with firebug?

    How to tilt inner element forward when tilting outer back with css 3d transforms

    How to use body_class to change css according to page hierarchy

    How to slide in divs from off screen into absolute layout using CSS transitions?