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

【问题标题】：How to make a div snap to min or max size, without any sizes in-between?如何使 div 捕捉到最小或最大尺寸，中间没有任何尺寸？
【发布时间】：2011-06-16 14:02:04
【问题描述】：

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

http://with.me/w/2275

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

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

有什么想法吗？

【问题讨论】：

很棒的设计，该页面的感觉和氛围非常好。这似乎是一个很好的设计方面。

标签： html css webkit

【解决方案1】：

@ryan;这是一个 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-media-queries/

【讨论】：

【解决方案2】：

这是通过根据屏幕大小应用不同的样式表来完成的：

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

如果您使用的是基于 webkit 的浏览器（safari / chrome），它实际上会使用 webkit 动画在两者之间进行动画处理。

【讨论】：