html - 指定 HTML 元素的自然大小

Question

让我们谈谈 HTML 中的图像。如果我在没有其他限制的情况下将图像放到页面上，它将假定其“自然大小”——即图像的字面大小(以像素为单位)。如果我指定一个 CSS max-width和 max-height然后它将保持其自然宽高比但缩小以适应大小限制。太棒了!

我想要在任意元素上的确切行为。也就是说，我想创建一个 <div>或其他具有自然大小(我将以像素为单位指定)并在受 max-width 影响时保持其纵横比的东西和 max-height . (加分项:如果该技术也支持 min-width 和 min-height 那就太棒了。)

以下是我收集到的更多信息:

• 对于 HTML5 图像，您可以使用 naturalWidth 读取图像的自然尺寸和 naturalHeight属性，提供 complete属性为真。不幸的是，作为MDN points out ，这些属性是只读的，并且特定于图像元素。

• This approach很棒，但是(即使高度响应 max-width )宽度不响应 max-height .

• 一些搜索没有找到纯 CSS 的解决方案，这让我觉得可能不存在。我也会接受 JavaScript 解决方案，但它们需要对窗口大小和父元素大小的变化具有鲁棒性。

Answer 1

这是我的 super 骗子解决方案:

HTML

<div class="ratioBox">
    <div class="dummy"></div>

     <div class="el">This is the super duper ratio element </div>

</div>

CSS

.ratioBox{
    position: relative;
    overflow: hidden;      /* to hide any content on the .el that might not fit in it */
    width: 75%;            /* percentage width */
    max-width: 225px;
    min-width: 100px;
    max-height: 112.5px;
    min-height: 50px;  
}

.dummy {
    padding-top: 50%;      /* percentage height */
}

.el {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver;
}

​

看到它在这里工作: http://jsfiddle.net/joplomacedo/7rAcH/

如果您无法理解正在发生的事情，解释将在一天结束时进行，不幸的是我没时间了。 [我写这篇文章时是 7 月 28 日下午 2:54(格林威治标准时间)]