Question

我有以下结构;

<body>
    <div id="splash">
      <img /> <!-- 512x512 -->
      <progress></progress>
      <img /> <!-- 512x512 -->
    </div>
</body>

这个css;

html, body {
    height: 100%;
}

#splash {
    max-height: 100%; /* does nothing */
}

#splash img {
    max-width: 100%;
    height: auto;
}

这会导致整个div滚动以适应浏览器窗口的宽度。目前，这也会缩放div的高度，将内容推到浏览器窗口的下限之下。

是否可以垂直缩放div，使其内容缩小，使其中任何部分都不会低于浏览器窗口的下限？

fiddle

Answer 1

＆＃13;

body { 
    margin: 0;                /* 1 */
}

#splash { 
    height: 100vh;
    display: flex;            /* 2 */
    flex-direction: column;   /* 2 */
}

#splash > img {
    min-height: 0;            /* 3 */
    object-fit: contain;      /* 4  (also try `cover` value) */
    width: 100%;
}

progress {
    width: 100%;
}

＆＃13;

<div id="splash">
    <img src="http://lorempixel.com/512/512/" />
    <progress></progress>
    <img src="http://lorempixel.com/512/512/" />
</div>

＆＃13;

jsFiddle

注意：

Remove default margins on body element（可能导致滚动条）
Establish vertical flex container
Enable flex items to shrink past content size
Force images to respect aspect ratio（请注意，IE和Edge尚不支持object-fit。有关解决方法的选项，请参阅here）。

Answer 2

您的百分比不起作用，因为html没有定义的height。也可以使用100%。

＆＃13;

html, body, #splash {
  height: 100%;
  margin: 0;
}
#splash img {
  max-height: 48%;
  display: block;
  margin: 0 auto;
}
progress {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 4%;
}

＆＃13;

<div id="splash">
  <img src="http://lorempixel.com/512/512/" />
  <progress></progress>
  <img src="http://lorempixel.com/512/512/" />
</div>

＆＃13;

使用calc()或flexbox可以获得更大的灵活性。

Answer 3

Michael_B的回答指出了我正确的方向，但我最终得到的东西并不依赖于object-fit被支持。

它需要向div添加周围的progress，并将图像的高度限制为我期望它们占用的空间的估计值，在此示例中为45％。

jsfiddle

＆＃13;

html, body {
  height: 100%; 
  width: 100%;
  margin: 0;
}

#splash {
  height: 100%;
}

#splash img {
  max-width: 100%;
  max-height: 45%;
  width: auto;
}

＆＃13;

<div id="splash">
    <img src="http://lorempixel.com/512/512/" />
    <div>
      <progress></progress>
    </div>
    <img src="http://lorempixel.com/512/512/" />
 </div>

＆＃13;

除了水平缩放，我可以垂直缩放div及其内容吗？

3 个答案:

jsFiddle

jsfiddle