首页 文章

高度等于动态宽度（CSS流体布局）[重复]

提问于
浏览 次
379

这个问题在这里已有答案：

是否可以设置与宽度相同的高度（比例1：1）？

Example

+----------+
| body     |
| 1:3      |
|          |
| +------+ |
| | div  | |
| | 1:1  | |
| +------+ |
|          |
|          |
|          |
|          |
|          |
+----------+

CSS

div {
  width: 80%;
  height: same-as-width
}
javascript jquery html css responsive-design

9 回答

  • 62

    使用jQuery，您可以通过执行此操作来实现

    var cw = $('.child').width();
$('.child').css({'height':cw+'px'});

    查看http://jsfiddle.net/n6DAu/1/上的工作示例

    回复于
  • 65

    [更新：虽然我独立发现了这个技巧，但我知道Thierry Koblentz打败了我 . 你可以在A List Apart上找到他的2009 article . 信用到期的信用 . ]

    我知道这是一个老问题，但我遇到了类似的问题，我只用CSS解决了 . 这是我讨论解决方案的blog post . 帖子中包含的是live example . 代码转发如下 .

    HTML：

    <div id="container">
    <div id="dummy"></div>
    <div id="element">
        some text
    </div>
</div>

    CSS：

    #container {
    display: inline-block;
    position: relative;
    width: 50%;
}
#dummy {
    margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver /* show me! */
}

    #container {
  display: inline-block;
  position: relative;
  width: 50%;
}

#dummy {
  margin-top: 75%;
  /* 4:3 aspect ratio */
}

#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver/* show me! */
}

    <div id="container">
  <div id="dummy"></div>
  <div id="element">
    some text
  </div>
</div>
    回复于
  • 4

    有一种方法使用CSS！

    如果根据父容器设置宽度，可以将高度设置为0，并将padding-bottom设置为将根据当前宽度计算的百分比：

    .some_element {
    position: relative;
    width: 20%;
    height: 0;
    padding-bottom: 20%;
}

    这适用于所有主流浏览器 .

    JSFiddle：https：//jsfiddle.net/ayb9nzj3/

    回复于
  • 362

    没有任何Javascript可能:)

    本文完美地描述了它 - http://www.mademyday.de/css-height-equals-width-with-pure-css.html

    HTML：

    <div class='box'>
    <div class='content'>Aspect ratio of 1:1</div>
</div>

    CSS：

    .box {
    position: relative;
    width:    50%; /* desired width */
}

.box:before {
    content:     "";
    display:     block;
    padding-top: 100%; /* initial ratio of 1:1*/
}

.content {
    position: absolute;
    top:      0;
    left:     0;
    bottom:   0;
    right:    0;
}

/* Other ratios - just apply the desired class to the "box" element */
.ratio2_1:before{
    padding-top: 50%;
}
.ratio1_2:before{
    padding-top: 200%;
}
.ratio4_3:before{
    padding-top: 75%;
}
.ratio16_9:before{
    padding-top: 56.25%;
}
    回复于
  • 649

    Simple and neet : 根据视口宽度使用 vw 单位作为响应高度/宽度 .

    vw：视口宽度的1/100 . （来源MDN）

    DEMO

    HTML：

    <div></div>

    1：1宽高比的CSS：

    div{
    width:80vw;
    height:80vw; /* same as width */
}

    表根据所需的纵横比和元素宽度计算高度 .

    aspect ratio  |  multiply width by
    -----------------------------------
         1:1      |         1
         1:3      |         3
         4:3      |        0.75
        16:9      |       0.5625

    这种技术允许您：

    • 在不使用 position:absolute; 的情况下插入元素内的任何内容

    • 没有不必要的HTML标记（只有一个元素）

    • 使用vh单位根据视口的高度调整元素纵横比

    • 您可以根据视口的高度和宽度制作一个响应方形或其他纵横比，这些比例始终适合视口（请参阅此答案：Responsive square according to width and height of viewport或此demo）

    IE9支持这些单位见canIuse for more info

    回复于
  • -2

    非常简单的方法jsfiddle

    HTML

    <div id="container">
    <div id="element">
        some text
    </div>
</div>

    CSS

    #container {
    width: 50%; /* desired width */
}

#element {
    height: 0;
    padding-bottom: 100%;
}
    回复于
  • 83

    扩展填充顶部/底部技术，可以使用伪元素来设置元素的高度 . 使用浮点和负边距从流和视图中删除伪元素 .

    这允许您在不使用额外的div和/或CSS定位的情况下将内容放在框内 .

    .fixed-ar::before {
  content: "";
  float: left;
  width: 1px;
  margin-left: -1px;
}
.fixed-ar::after {
  content: "";
  display: table;
  clear: both;
}


/* proportions */

.fixed-ar-1-1::before {
  padding-top: 100%;
}
.fixed-ar-4-3::before {
  padding-top: 75%;
}
.fixed-ar-16-9::before {
  padding-top: 56.25%;
}


/* demo */

.fixed-ar {
  margin: 1em 0;
  max-width: 400px;
  background: #EEE url(https://lorempixel.com/800/450/food/5/) center no-repeat;
  background-size: contain;
}

    <div class="fixed-ar fixed-ar-1-1">1:1 Aspect Ratio</div>
<div class="fixed-ar fixed-ar-4-3">4:3 Aspect Ratio</div>
<div class="fixed-ar fixed-ar-16-9">16:9 Aspect Ratio</div>
    回复于
  • 55

    真的，这属于对Nathan 's answer, but I' m的评论不允许这样做......
    即使装在盒子里的东西太多，我也希望保持宽高比 . 他的例子扩大了高度，改变了纵横比 . 我找到了补充

    overflow: hidden;
overflow-x: auto;
overflow-y: auto;

    对.element的帮助 . 见http://jsfiddle.net/B8FU8/3111/

    回复于
  • 6

    宽度：80vmin;身高：80vmin;

    CSS可以实现80％的最小视图，高度或宽度

    http://caniuse.com/#feat=viewport-units

    回复于

相关问题