How does CSS resize images?


Tags: css,image,css3

Problem :

Let's say I have a image that's 1240x720 and I resize it to 1240x250 with CSS using height and width. I access my site and have to download it but, do I download the original one (1240x720) that then is resized on my browser or the already resized version (1240x250)?

From googling I can only find posts where people explain how to use it so this might be a really dumb question as it's not even mentioned anywhere..



Solution :

The browser will download whatever the URL points to.

If the height and width of the <img> don't match the dimensions of the image, it will be scaled to fit.


    CSS Howto..

    How to transform xPath to CSS Selector

    How to apply css for min-width and print?

    How to put html input text into an image using CSS?

    How do I center the body text div?

    How to align HTML horizontaly using CSS

    How to accomplish onHover event without a second image

    How to use float and margin together?

    How to select all fieldsets in a form except the first one?

    How to center inside divs in a 1140px fluid responsive framework?

    How to get similar style as JQuery UI website itself

    How to remove
      unordered list's last
    • list item's border using css without changing anything in HTML code?

    How to append bind-attr class to initial one in Ember?

    Jquery canvas cloud plugin - How to style canvas elements with CSS

    How to set parent div height to self adapt to the inner div height?

    How to exclude an Element (via ID) in CSS

    How to solve css issue to display image caption?

    How can I change using jekyll bootstrap navbar colour?

    How to make the opposite effect of Hover in css [duplicate]

    How to reference / link to a Css-File styling elements in a webview for Android

    How to align an icon to the right of content

    How to make a smooth dashed border rotation animation like 'marching ants'

    CSS: How to float 3 divs side by side for width:100% without messing up?

    how to add several td and tr in css

    How to change underline thickness of an a-tag without using border?

    How to create a custom shape - css

    how to get attribute value using selenium and css

    How to have several equal sized div blocks take 100% of a parent container

    How to indent list items using CSS when you have floating blocks?

    How to repeat an image but only horizontally?

    How can I make a fixed div JUMP when scrolling?