14

让我们谈谈 HTML 中的图像。如果我在没有其他约束的情况下将图像放到页面上，它将假定其“自然大小”——即图像的字面大小（以像素为单位）。如果我指定一个 CSS max-width，max-height那么它将保持其自然纵横比但缩小以适应大小约束。惊人的！

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

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

  • naturalWidth对于 HTML5 图像，您可以使用和属性读取图像的自然大小naturalHeight，前提是该complete属性为真。不幸的是，正如MDN 指出的那样，这些属性是只读的并且特定于图像元素。

  • 这种方法很棒，但是（即使高度响应max-width）宽度不响应max-height。

  • 一些搜索未能找到仅 CSS 的解决方案，这让我认为可能不存在。我也会接受 JavaScript 解决方案，但它们需要能够适应窗口大小和父元素大小的变化。

4

3 回答 3

3

这是我的超级骗子解决方案：

的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（格林威治标准时间）]

于 2012-07-28T13:44:57.887 回答
1

像使用 CSS 一样调整 div 的大小

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

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

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

CSS（用于 1:1 纵横比）

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

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

更进一步：vmin 和 vmax

您也可以使用vmin/vmax。这些单位选择视口宽度和高度之间的最小值或最大值，因此您可以获得所需的最大/最小高度和最大/最小宽度。但是浏览器对这些单元的支持不如vh/vw( canIuse )。

演示

CSS（对于 1:1 纵横比）：

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

    width: 80vmin; 
    height: 80vmin;

    max-width: 800px;
    max-height: 800px;
}
于 2014-05-25T13:11:42.560 回答
0

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

于 2012-07-28T06:42:22.873 回答