Question

我想在具有自动尺寸的绝对定位div上保持纵横比。我尝试了其他stackoverflow问题的一些解决方案，但它们不起作用或者它们需要固定的维度。

我希望div在保持4：3比例的同时包装其内容。我想用css和更少的javascript来解决它。

使用css有一种聪明的方法吗？

我的代码如下。

$('span').hover(function() {
  $(this).find('div').css('visibility', 'visible')
}, function() {
  $(this).find('div').css('visibility', '')
})

.jsmbox {
  position: absolute;
  overflow: hidden;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  max-width: 100%;
  max-height: 100%;
  color: black;
  background-color: gold;
  padding: 6px;
  visibility: hidden;
  top: 0;
  left: 0;
  cursor: default;
  text-align: justify;
  z-index: 100;
}
.jsmbox:hover {
  max-width: 400px;
  max-height: 300px;
}
.custom {
  width: 320px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span style="position: relative">[hover me1]
    <div class="jsmbox">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper eleifend augue, at eleifend lacus tincidunt sed. Nam et ipsum non dui pellentesque suscipit at finibus metus. Nullam vel augue eros. Sed sodales mi ut sodales posuere. Nullam eleifend nisl vel urna bibendum egestas. Sed eget dolor nunc. Curabitur elementum dolor sit amet enim pellentesque, vitae cursus tellus tempus. Maecenas non cursus nisl, sit amet volutpat nisl. Integer faucibus at nunc eget euismod.
    </div>
</span> 

<span style="position: relative">[hover me2]
    <div class="jsmbox custom">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper eleifend augue, at eleifend lacus tincidunt sed. Nam et ipsum non dui pellentesque suscipit at finibus metus. Nullam vel augue eros. Sed sodales mi ut sodales posuere. Nullam eleifend nisl vel urna bibendum egestas. Sed eget dolor nunc. Curabitur elementum dolor sit amet enim pellentesque, vitae cursus tellus tempus. Maecenas non cursus nisl, sit amet volutpat nisl. Integer faucibus at nunc eget euismod.
    </div>
</span>

<span style="position: relative">[hover me3]
    <div class="jsmbox custom">This text is much shorter!</div>
</span>

~~第一个div（悬停me1）是完全自动标注的，文本甚至不适合。~~ [ 不正确！ 它有悬停时的最大尺寸。]

第二个div（悬停me2）有固定的宽度。
第三个div（悬停me3）也有固定的宽度，但文字较短，因此宽高比不正确且div对于其内容来说太大了......

Answer 1

回答这个问题：

使用css有一种聪明的方法吗？

我不知道。

有一些哑或不灵活的：

在width上设置height和.jsmcon，以便所有具有相同的尺寸和宽高比。 [哑巴 - 它看起来很可怕而且不灵活。]
Do this. [不适用于此问题 - 尽管它的聪明，此解决方案仍然根据其容器保持其宽高比，不它的内容。 ]

我决定以与你不同的方式解决这个问题。

不是根据内容的长度估计框的必要宽度，而是根据文本当前占用的区域估计所需的宽度。

代替：

var l = box.text().length;
l = (l > $(window).width()*0.9) ? $(window).width()*0.9 : l;

我用这个：

/*Some math formulae:
     *****
     ColumnsPerRow = Width/Height;
     Width = ColumnsPerRow * Height;
     Area = Width * Height;
        Area = (ColumnsPerRow * Height) * Height;
        Area = ColumnsPerRow * Height^2;
        Height^2 = Area/ColumnsPerRow;
        Height = sqrt(Area/ColumnsPerRow);
     Width = Area / Height;
     */

     //get approximate area needed to display the text
     var tArea = (con.width() * con.height());
     var tColumnsPerRow = ratio; //ratio is global
     var tHeight = Math.sqrt(tArea/tColumnsPerRow);

     var l = tArea/tHeight;
     l = (l > $(window).width()*0.9) ? $(window).width()*0.9 : l;

有什么区别？

'旧方式'与'新方式'之间的差异因浏览器，字体大小等而异。

为了便于说明，以下是两个浏览器的结果，其中css为font-size: 17px;，JS为var ratio = 4/3。

维瓦尔第：

31.25％关闭 4.76％关闭。
   66.67％ off 3.18％ off。

火狐：

81.25％关闭 28.71％关闭。
   36.36％关闭 8.25％关闭。

备注：

现在可以在javascript的顶部找到预期的宽高比。

min-width已从.jsmcon中移除。（它会在小孩身上抛出宽高比。）

我们有一些方法可以计算每个.jsmcon的面积。

box.css("max-width", "unset");删除max-width上的.jsmbox，以便.jsmcon的宽度大于0px。

box.css("max-width", "");从max-width的内联样式中删除.jsmbox，以便样式表中的CSS可以接管。）

计算文本占用面积的更好方法是改变事物，忘记转换，或者使用虚拟元素来测试文本占用的区域。< / EM>

JSFiddle here.

保持宽高比css在绝对位置和自动尺寸上

1 个答案: