html - 将元素的高度设置为等于元素的宽度

标签 html css

我想将一个 div 的高度设置为等于一个 div 的宽度。棘手的是 div 没有设置宽度,因为它是响应式的。我附上了我的目标图片。我只想为此使用 CSS。

  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-icon  name="add"></ion-icon>
        <h3>SIDE</h3>
      </ion-col>
      <ion-col>
        <ion-icon name="add"></ion-icon>
        <h3>FRONT</h3>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-icon name="add" ></ion-icon>
        <h3>TOP</h3>
      </ion-col>
      <ion-col>
        <ion-icon name="add" ></ion-icon>
        <h3>SEAT</h3>
      </ion-col>
    </ion-row>    
  </ion-grid>

enter image description here

最佳答案

如果您希望它是像素完美的(相同的高度,相同的宽度),您可以使用这个公式:

.stretchy-wrapper {
    width: 100%;
    padding-bottom: 100%; /* 1:1 */
    position: relative;
}

内部:

.container-div {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}

这是一个 js fiddle :https://jsfiddle.net/a2j4sv2n/3/ .

关于html - 将元素的高度设置为等于元素的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44506856/

相关文章:

javascript - 将 css js 添加到调用短代码的插件 wordpress

css - 如何在 Wordpress 的页面中添加悬停边框?

Javascript 不注册 onClick 按钮的值并将其 append 到文本区域

jquery - .click 事件调用了两次?

javascript - 任何阻止网站中外部 jQuery 或 javascript 代码的方法

jQuery 文件已连接,但 jQuery 无法正常工作

css - Div 框的 z-index 问题

jquery - 带有未知宽度的 jquery 的中心 div

javascript - 将 html 文件中的博客文章内容加载到模板中,然后加载到索引文件中

javascript - 在没有文件的情况下从 HTML5 中的 javascript 播放音频 - 使用缓冲区