Как сделать привязку к минимальному или максимальному размеру без промежуточных размеров?

Question

Я недавно увидел в твиттере ссылку на новый сайт path;со мной.На странице with.me происходят довольно простые, но изящные вещи, например, посмотрите на эту статью Эштона Катчера:

http://with.me/w/2275

Моя любимая вещь на этой странице - как картинкакажется, чтобы привязаться к минимальному и максимальному размеру.Когда вы измените размер обзора, вы заметите, что изображение в конечном итоге будет уменьшено до «щелкающего» способа.Он не изменяется в браузере, он мгновенно переходит к меньшему размеру, если больший не помещается в окне браузера.

Как они это делают?Я копался в CSS последние два часа.У меня есть собственная тестовая страница, на которой я пытаюсь заставить это работать, но не могу понять это.

Есть идеи?

Answer 1

@ Райана; это css3 media query.

Если проверить источник ссылки, то вы видели, что он вас там css

@media screen and (max-height: 720px), screen and (max-width: 850px) {
      #page.permalink {
        height: 454px;
        margin: -247px auto 0 auto;
      }

      #page-container {
        width: 650px;
      }

      #photo-container {
        margin-left:-370px;
      }

      #photo {
        height: 454px;
        width: 340px;
        background-size: 340px 454px;
      }
    }

отметьте это http://css -tricks.com / CSS-медиа-запросы /

Answer 2

Это делается путем применения различных таблиц стилей в зависимости от размера экрана:

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

Если вы используете браузер на основе webkit (safari / chrome), он фактически анимирует между ними с помощью анимации webkit.