How to make a div snap to min or max size, without any sizes in-between?

Tags: html,css,webkit

Problem :

I recently saw a link, on twitter, to path's new website; There's some pretty simple but neat things occurring on a page, for example look at this one of Ashton Kutcher:

My favorite thing on that page is how the picture appears to snap to a minimum and maximum size. When you resize the browse, you will notice that the image will eventually shrink to a smaller size in a "snapping" fashion. It doesn't resize with the browser, it instantly goes to the smaller size if the bigger one can't fit in the browser window.

How are they doing this? I've been poking around the CSS for the past two hours. I have a test page of my own that I've been trying to get this to work on, but can't figure it out.

Any ideas?

Solution :

It's done by applying different stylesheets based on screen size:

@media screen and (min-height: 1000px) {

If you're using a webkit-based browser (safari / chrome), it actually animates between the two using a webkit animation.

    CSS Howto..

    How to control spaces/margin between bars?

    How can I make a fix positioned menu bar?

    How to recreate this image using css

    How to align text vertical CSS

    How to test browser performance of specific CSS property?

    How to use JQuery to identify CSS 'text-decoration' [closed]

    how to display products side by side

    How to keep floated width of divs to stay exact instead of 100%?

    when a div is showing do some thing for me and when its hidden stop that , with jquery its possible?

    simplest slideshow using html, css toggling visibility of each div tag

    How to sort and combine this css rules so it doesn't repeat so much?

    How to align submenu to the left of container

    How can one use scroll bar images?

    How change css using variables to make an animation

    Animation performance jQuery, css transition ? How can i have a better performance here?

    How to disable css warning “Unknown property” in Eclipse Mars?

    How to make a very simple coloured 1-line text area?

    How to display an HTML list non-nested?

    How can I find out what CSS is needed to implement twitter Bootstraps Modal. [closed]

    How Visually Long is a String?

    Show notification counter with bootstrap

    How to make div size bigger?

    Mapbox GeoJSON loaded via local URL: icons not showing popup properties

    How to remove “gap” from nav bar and line?

    How do i use a simple string variable with jquery?

    How to minimize the number of CSS classes created?

    SVG + CSS - how to include in HTML and scale & color?

    How do i set the HTML tag's “background” property with JS, still allowing other properties from a CSS file to be unchanged?

    How do you find the largest font size that won't break a given text?

    How to trigger click on links with the same class?