html - 在绝对位置和自动尺寸上保持纵横比 css

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(hover me3)也有固定宽度，但文本较短，因此宽高比不正确，div 对其内容来说太大了...

Answer 1

在回答这个问题时:

Is there a clever way to do this with 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;

---

有什么区别？

“旧方式” 和“新方式” 的区别因浏览器、字体大小等而异。

为了便于说明，这里是 2 个浏览器的结果 font-size: 17px;在 css 和 var ratio = 4/3 中在 JS 中。

Vivaldi:

31.25% off vs. 4.76% off.
66.67% off vs. 3.18% off.

Firefox:

81.25% off vs. 28.71% off.
36.36% off vs. 8.25% off.

---

注意事项:

1. 预期的宽高比现在位于 javascript 的顶部。

2. min-width已从 .jsmcon 中删除. (它会影响 child 子的纵横比。)

3. 我们有一些技巧要做，这样我们就可以计算每个 .jsmcon 的面积。 .

   • box.css("max-width", "unset");删除 max-width在 .jsmbox这样.jsmcon宽度大于 0px。

   • box.css("max-width", "");删除 max-width来自 .jsmbox 的内联样式以便我们样式表中的 CSS 可以接管。)

4. 计算文本所占区域的更好方法是改变周围的事物，忘记过渡，或制作一个虚拟元素来测试文本所占区域的大小。

JSFiddle here.