响应高度与宽度成正比 [英] Responsive height proportional to width

问题描述

是否可以使用 HTML 和 CSS 实现以下逻辑?

宽度:100%；高度:宽度的 30%；

我想实现的:如果我减小宽度，高度也会按比例减小.

解决方案

Padding %

这可以通过给元素 height:0 和 padding-bottom:30% 来实现.

在所有浏览器中，当以 % 指定填充时，它是相对于父元素的宽度计算的.这对于响应式设计来说可能是一个非常有用的功能.

JSFiddle 演示

在演示中，页面顶部的蓝色框是一个div代码>.高度是响应式的，它可以在不增加高度的情况下包含可变数量的内联内容.它在 IE7/8/9/10、Firefox、Chrome、Safari 和 Opera 中测试良好.

.content {宽度:100%；高度:0；填充底部:30%；}...<div class="content"></div>

填充百分比和绝对位置

如果使用 0-height 元素有任何问题，demo 也有一个已实现的绿色框使用包装元素和绝对位置.不确定这种方法是否有任何优势.

.wrapper {位置:相对；宽度:100%；填充底部:30%；}.wrapper .content {位置:绝对；宽度:100%；高度:100%；}...<div class="wrapper"><div class="content"></div>

Is it possible to implement the following logic usic HTML and CSS?

width: 100%;
height: 30% of width;

What I want to implement: If I decrease the width, the height will also decrease proportionally.

解决方案

Padding %

This can be achieved by giving the element height:0 and padding-bottom:30%.

In all browsers, when padding is specified in %, it's calculated relative to the parent element's width. This can be a very useful feature for Responsive Design.

JSFiddle Demo

In the demo, the blue box at the top of the page is a single div. The height is responsive, and it can contain a variable amount of inline content without increasing the height. It tested fine in IE7/8/9/10, Firefox, Chrome, Safari, and Opera.

.content {
    width: 100%;
    height: 0;
    padding-bottom: 30%;
}
...
<div class="content"></div>

Padding % and absolute position

If there are any problems with using a 0-height element, the demo also has a green box that's implemented using a wrapper element and absolute position. Not sure if there are any advantages to this approach.

.wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 30%;
}
.wrapper .content {
    position: absolute;
    width: 100%;
    height: 100%;
}
...
<div class="wrapper">
    <div class="content"></div>
</div>

这篇关于响应高度与宽度成正比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！