响应正方形divs [英] Responsive squares divs

问题描述

我想有一个带有背景图像的4个div的列，并且适合父宽度的100％，并将高度设置为正方形。这是我没有％的：

我的HTML：

 < div class = col-sm-3 slotsstyle =background-color：red;> 
< div class =slot>< / div> 
< div class =slot>< / div> 
< div class =slot>< / div> 
< div class =slot>< / div> 
< / div> 
  

和我的CSS一起使用 width 和 以像素为单位。

  .slot {
 background-image： URL（ IMG / Inventory_slot_background.png）; 
背景重复：不重复; 
 width：68px; 
 height：68px; 
} 
 .slots {
 padding：0; 
} 
  

我想给宽度：100％; 然后像 height：width;

编辑：问题是，如果我使用 padding-bottom：100％; ，如果我想放置文本或图像，则背景展开，如下所示：

<您可以使用一个伪元素：

jsdata-hide =false>

.slot {box-shadow ：插入0 0 5px＃C9A170;背景：＃EBE6C9;边框：实心＃78624A;溢出：隐藏;填充：5像素;保证金：1EM; } .slot：before {content：'';向左飘浮;填充：50％0; } body {margin：0; }

 < div class =col-sm-3 slotsstyle =background-color：red;> < div class =slot>这里的任何东西< / div> < div class =slot>可以比最初的方形更长地生长< / div> < div class =slot>< / div> < div class =slot>< / div>< / div>  

I want to have a column with 4 divs with a background-image and fit the 100% of the parent width and give the same to the height to make a square. This is what i have without %:

My HTML:

<div class="col-sm-3 slots" style="background-color: red;">
    <div class="slot"></div>
    <div class="slot"></div>
    <div class="slot"></div>
    <div class="slot"></div>
</div>

And my CSS with width and height in pixels.

.slot {
    background-image: url("img/Inventory_slot_background.png");
    background-repeat: no-repeat;
    width: 68px;
    height: 68px;
}
.slots {
    padding: 0;
}

I want to give width: 100%; and then something like height: width;

Edit: The problem is that if i use the padding-bottom: 100%; if i want to put text or images, the backgrund expands and look like this:

解决方案

You may use a pseudo element:

.slot {
  box-shadow:inset 0 0 5px #C9A170;
  background:#EBE6C9;
  border:solid #78624A;
  overflow:hidden;
  padding:5px;
  margin:1em;
  }
.slot:before {
  content:'';
  float:left;
  padding:50% 0;
  }
body {
  margin:0;
  }

<div class="col-sm-3 slots" style="background-color: red;">
    <div class="slot"> anything here</div>
    <div class="slot"> can grow taller than the initial square shape</div>
    <div class="slot"></div>
    <div class="slot"></div>
</div>

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