Question

让我们谈谈HTML中的图像。如果我将图像放在没有其他约束的页面上，它将假定其“自然大小” - 即图像的文字大小（以像素为单位）。如果我指定了CSS max-width和max-height，则保持其自然宽高比，但缩小以适应大小约束。真棒！

我想要在任意元素上的确切行为。也就是说，我想创建一个<div>或其他具有自然大小的内容（我会以像素为单位指定）并在受max-width和max-height影响时保持其宽高比。（加分：如果该技术也支持min-width和min-height，那将会很酷。）

以下是我收集的更多信息：

对于HTML5图片，只要naturalWidth属性为true，您就可以使用naturalHeight和complete属性读取图片的自然尺寸。不幸的是，作为MDN points out，这些属性是只读的，并且特定于图像元素。
This approach很棒，但是（即使高度响应max-width），宽度也不会响应max-height。
一些搜索未能找到一个只有CSS的解决方案，这让我觉得可能不存在。我也接受JavaScript解决方案，但它们需要对窗口大小和父元素大小的变化具有鲁棒性。

Answer 1

这是我的超级解决方案：

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（格林尼治标准时间）我写这个]

Answer 2

使用CSS

调整像图像一样的div

DEMO ：调整结果窗口的大小（宽度和高度）以查看div调整大小，如图像。

在演示中，您可以看到image和div根据结果窗口视口的高度和宽度以相同的方式调整大小。

此技术使用 vh/vw 单位。它们允许您根据视口高度设置宽度，并根据视口宽度设置高度。
通过组合使用max-width和max-height，您可以使其在浏览器调整大小时的行为和大小调整。
浏览器支持这些单位：IE9 +。有关详细信息，请参阅canIuse。
上面的演示使用1：1的宽高比，但您可以通过一些计算使用任何其他宽高比，例如：

4：3宽高比：demo
16：9宽高比：demo

CSS（纵横比为1：1）

div{    
    width: 80vw; 
    height: 80vh;

    max-width: 80vh;
    max-height: 80vw;
}

更进一步：vmin和vmax

您也可以使用vmin/vmax。这些单位选择视口宽度和高度之间的最小值或最大值，以便您可以获得所需的最大/最小高度和最大/最小宽度行为。但是浏览器对这些单元的支持并不像vh/vw（canIuse）那样好。

<强> Demo

CSS（宽高比为1：1）：

div{    
    min-width:200px;
    min-height:200px;

    width: 80vmin; 
    height: 80vmin;

    max-width: 800px;
    max-height: 800px;
}

Answer 3

我认为现在使用纯CSS无法做到这一点。也许在将来我们将完全支持CSS变量和计算。现在，您可以使用透明图像指定宽高比或使用脚本。也许像LESS这样的东西可能很有用。

指定HTML元素的自然大小

3 个答案:

使用CSS

更进一步：vmin和vmax