CSS宽度相同高度

Question

我想接下来要做的伎俩在我的CSS文件中，以便（高度=宽度）不设置像素。我想这样做，因此无论浏览器的分辨率，会对这两个维度相同的值。

#test{
    height: 100%;
    width: (same as height);
}

我喜欢用CSS和JavaScript不去做。

先感谢您。

Answer 1

目前（据我所知）这样做是利用视的唯一途径CSS值涉及（VH / VW）

支持也不是很大的时刻：http://caniuse.com/viewport-units但这里是一个快速演示

JSFiddle

CSS

.box {
    background-color: #00f;
    width: 50vw;
    height:50vw;
}

盒子响应，却总是保持正方形。

作为height:100%不等于width:100%，因为它们指的是不同的事情都是家长的相关尺寸纯净％的值将无法正常工作。

Answer 2

另一个选项是使用img元素的行为，使纵横比

这里我使用SVG图像和数据链接内联它，使其更简单

描述所需的长宽比可以用视框SVG属性viewBox='0 0 width-ratio height-ratio'

例子：

html,
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
        "Ubuntu", "Cantarell", "Fira Sans",
        "Droid Sans", "Helvetica Neue", sans-serif;
    margin: 0;
    padding: 0;
}
body {
    margin: 1rem;
}

.row {
  padding: 8px 0px;
}

.block {
  display: inline-block;
  vertical-align: top;
  position: relative;
  margin-left: 8px;
  margin-right: 8px;
}

.block-content {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  display: flex; 
  justify-content: center; 
  align-items: center;
}

.ratio--width-to-height {
  height: 100%; 
  width: auto;
}

.ratio--height-to-width {
  height: auto; 
  width: 100%;
}

<h1>
  Block aspect ratio with svg image
</h1>

<h2>
  width to height
</h2>

<div class="row">   
  <div class="block" style="background: lime; height: 120px;">
    <img class="ratio--width-to-height" 
    src="data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'&gt;&lt;/svg&gt;">
    <div class="block-content">1 : 1</div>
  </div>

  <div class="block" style="background: cyan; height: 120px;">
    <img class="ratio--width-to-height" 
    src="data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1'&gt;&lt;/svg&gt;">
    <div class="block-content">2 : 1</div>
  </div>
  
  <div class="block" style="background: orange; height: 120px;">
    <img class="ratio--width-to-height" 
    src="data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1.25'&gt;&lt;/svg&gt;">
    <div class="block-content">1 : 1.25</div>
  </div>
</div>

<h2>
  height to width
</h2>

<div class="row">   
  <div class="block" style="background: lime; width: 120px;">
    <img class="ratio--height-to-width" 
    src="data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'&gt;&lt;/svg&gt;">
    <div class="block-content">1 : 1</div>
  </div>

  <div class="block" style="background: cyan; width: 120px;">
    <img class="ratio--height-to-width" 
    src="data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1'&gt;&lt;/svg&gt;">
    <div class="block-content">2 : 1</div>
  </div>
  
  <div class="block" style="background: orange; width: 120px;">
    <img class="ratio--height-to-width" 
    src="data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1.25'&gt;&lt;/svg&gt;">
    <div class="block-content">1 : 1.25</div>
  </div>
</div>

在codepen https://codepen.io/forceuser/pen/MMWBBx同样的例子

Answer 3

最大宽度/最大高度为我工作：

定尺寸的图像在一个div（■）来设置。

.parent {
       position: absolute;
}

.box {
    width: 100%;
    height: 100%;
}

.box img {
   max-width: 100%;
   max-height: 100%;
}