css – 指定HTML元素的自然大小

我们来讨论 HTML中的图像.如果我将图像放在没有其他约束的页面上,它将承担其“自然大小”—即图像的文字大小(以像素为单位).如果我指定一个CSS max-width和max-height,那么它将保持其自然的纵横比,但是缩小到适合大小约束.真棒！

我想要一个任意元素的确切行为.也就是说,我想创建一个< div>或其他具有自然大小(我将以像素指定)的其他东西,并在受max-width和max-height影响时保持其纵横比. (积分：如果技术也支持最小宽度和最小高度,则会很酷).

这里有一些我收集的信息：

>对于HTML5图像,您可以使用naturalWidth和naturalHeight属性读取图像的自然大小,前提是完整属性为true.不幸的是,作为MDN points out,这些属性是只读的,并且是特定于图像元素的.
> This approach是辉煌的,但(尽管高度响应最大宽度)宽度不响应最大高度.
>有一点搜索未能找到一个只有CSS的解决方案,这使我觉得可能不存在.我还将接受JavaScript解决方案,但是它们需要对窗口大小和父元素大小的变化是稳健的.

解决方法

这是我的超级笨蛋解决方案：

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(GMT时间),因为我写这个]

原文地址：https://www.jb51.cc/css/216699.html