如何强制响应元素保持其长宽比 [英] How to force a responsive element to retain its aspect ratio

问题描述

我有一个响应 div ，其中包含大量的文本，并且与其容器的宽度相同。

 < div>这是一个长字符串的文本，但真正的文本会更长。 
  

如何强制 div 一个高度是其宽度的50％，并阻止内容溢出边界仅使用HTML和CSS ？

它应该像这样

此

解决方案

什么是CSS填充技巧？

首先是有关包含块的信息以供参考。

4.如果元素具有position：absolute，则建立包含块由具有'绝对'，'相对'或'固定'的位置的最近的祖先，以下列方式：

• p>在祖先是内联元素的情况下，包含块是为该元素生成的第一个和最后一个内联框的填充框周围的边界框。在CSS 2.1中，如果内联元素跨多行分割，则包含块未定义。




• 否则，包含块由祖先的填充边缘形成。 $ b

当元素设置为 position：absolute 以 position：absolute ， position：relative 或位置来定位其最近的祖先：固定。如果元素没有这样的祖先，它将定位到引用根元素。

这意味着，如果你在这个新的响应式 div 上设置 position：relative code>，您可以插入一个 position：absolute 的子元素，并使用 top：0;宽度：100％; bottom：0; 。

要确保内容不会溢出边界集 overflow：auto

 < div style =position：absolute; top：0; width：100％; bottom：0; overflow：auto;> div> 
  

这将创建一个保留其纵横比的元素，并且可以包含内容，而不更改纵横比。 / p>

 < div style =padding-bottom：50％; position：relative;& 
< div style =position：absolute; top：0; width：100％; bottom：0; overflow：auto;> 
 Content ... 
< / div> 
< / div> 
  

实际操作！

I have a responsive div that contains a large amount of text and is the same width as its container.

<div>This is a long string of text, but the real text will be a lot longer.</div>

How can I force the div to retain a height which is 50% of its width and stop the contents from overflowing the boundaries using only HTML and CSS?

It should look like this

And this

解决方案

What is the CSS padding trick?

First some information about containing blocks for reference.

9.1.2 Containing blocks
In general, generated boxes act as containing blocks for descendant boxes; we say that a box "establishes" the containing block for its descendants. The phrase "a box's containing block" means "the containing block in which the box lives," not the one it generates.

Now, here's the trick.

Padding
* Percentages: refer to width of containing block

It is intuitive that horizontal padding percentages would reference the width of the containing block. However, vertical padding percentages also refer to the width, not the height.

What does that mean for maintaining aspect ratio?

What this means is that if you have an element which is the same width as its parent, and you set padding-bottom: 50%, the element will be half as wide as it is tall.

<div style="padding-bottom: 50%;"></div>

However, if the element is less than the full width of its parent, because the padding property refers to the parents width the numbers will change.

For example, if the element is half the width of its parent and you set padding-bottom: 50%, it will be as tall as it is wide.

<div style="width: 50%; padding-bottom: 50%;"></div>

This is because percentages for the padding property are relative to the containing block, not the element.

To make an element which is half its parent's width retain an aspect ratio of 2:1 (half as tall as it is wide), cut the percentage in half.

<div style="width: 50%; padding-bottom: 25%;"></div>

How can I use this in the real world?

If the element in question contains any content which takes up space in the document flow, the height will change. To avoid this you can take advantage of another CSS trick.

10.1 Definition of "containing block"
4. If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:

• In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined.

• Otherwise, the containing block is formed by the padding edge of the ancestor.

When an element is set to position: absolute it will be positioned in reference to its closest ancestor with position: absolute, position: relative or position: fixed. If the element has no such ancestors, it will positioned in reference to the root element.

This means, if you set position: relative on this new responsive div, you can insert a child with position: absolute and tell it to be the same size as the parent using top: 0; width: 100%; bottom: 0;.

To make sure the contents won't overflow the boundaries set overflow: auto

<div style="position: absolute; top: 0; width: 100%; bottom: 0; overflow: auto;"></div>

This will create an element which retains its aspect ratio and can contain content without changing the aspect ratio.

<div style="padding-bottom: 50%; position: relative;">
    <div style="position: absolute; top: 0; width: 100%; bottom: 0; overflow: auto;">
        Content...
    </div>
</div>

See it in action!

这篇关于如何强制响应元素保持其长宽比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！