html - 如何使 div 捕捉到最小或最大尺寸，而中间没有任何尺寸？

Question

我最近在 Twitter 上看到了 Path 新网站的链接；与我一起。 with.me 页面上发生了一些非常简单但巧妙的事情，例如看看 Ashton Kutcher 的这个:

http://with.me/w/2275

该页面上我最喜欢的事情是图片如何显示为最小和最大尺寸。当您调整浏览大小时，您会注意到图像最终会以“捕捉”方式缩小到较小的尺寸。它不会随浏览器调整大小，如果浏览器窗口无法容纳较大的尺寸，它会立即变为较小的尺寸。

他们是如何做到这一点的？过去两个小时我一直在研究 CSS。我有一个自己的测试页面，我一直在尝试让它工作，但无法弄清楚。

有什么想法吗？

Answer 1

@ryan；这是一个 css3 媒体查询。

如果检查链接源，那么您会看到他在其中的 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-media-queries/