css 宽度与高度相同

Question

我想在我的 css 文件中执行下一个技巧，以便（高度 = 宽度）不设置像素。我想这样做，无论浏览器的分辨率是多少，在这两个维度上都有相同的值。

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

我更喜欢使用 css 而不是 javascript。

提前谢谢你。

Answer 1

目前唯一的 CSS 方法（AFAIK）是使用视口相关值（vh / vw）

目前支持不是很好：http://caniuse.com/viewport-units 但这里有一个快速演示

JSFiddle

CSS

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

框是响应式的，但始终保持方形。

纯 % 值将不起作用，因为 height:100% 不等于 width:100%，因为它们指的是不同的事物作为父级的相关维度。

Answer 2

ma​​x-width / max-height 对我有用：

在 div (.box) 中设置一个确定大小的图像。

.parent {
       position: absolute;
}

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

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

Answer 3

另一种选择是使用 img 元素行为来制作 纵横比

这里我使用 svg 图像并将其与 data url 内联以使其更简单

要描述所需的纵横比，您可以使用 viewBox 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 4

这是我的方式

  aspect-ratio: 1 / 1;
  height: 100%;

例子：

.my-container {
  width: 100%;
  height: 150px;
  background: black;
  padding: 20px
}

.my-element {
  background: #fff;
  aspect-ratio: 1 / 1;
  height: 100%;
}

<div class="my-container">
  <div class="my-element">Height = Width</div>
</div>