javascript - css 方形限制大小和位置到父 div

Question

我试图让一个正方形具有有限的大小并保持在父 div 的范围内并干净地缩放。我可以得到其中的一两个，但不是全部。

设置是我有一个主 div，左边有两列 div，右边有一个占据剩余空间的 div。我希望右侧的 div 包含正方形，并且正方形的边界保留在父 div 内。如果我不使用填充底部来保持它的方正，我可以让它保持原状，但这样元素的图片看起来很糟糕。

看看我的js bin .到达广场的途径是: Weapons -> item b1 -> click on it to make it stay

padding-bottom 将它向下推到父 div 的外面，并将底部从整个东西中吹出来。

CSS

.itempanel{
  display: block;
  align-items: center;
  position: relative;
}
.itemcontainer{
  position: relative;
  top: 30%;
  height: 60%;
  width: auto;
  margin-left: auto;
  margin-right: auto;

}
.itemdisplay{
  display:none;
  flex-direction: column;
  width: 60%;
  padding-bottom: 60%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  align-items: center;
  overflow: hidden;
}
/* .itemdisplay::after{
  content: " ";
  display: block;
  padding-bottom: 100%;
} */

html

<div class="itempanel">
    <div class = "itemcontainer">
      <div id="itemdisplay" class="itemdisplay">
        <img id="itemimg" class="itemimg" src=""></img>
        <div id="itemdesc" class="itemdesc">
          <div id="itemtitle" class="itemtitle"></div>
          <div id="itembody" class="itembody"></div>
          <a id="itemclick" class="itemclick" href="">Click To Place Order</a>
        </div>
      </div>
    </div>
  </div>

感谢您的帮助!

* 一些背景知识 - 女朋友想要一场天际婚礼，所以为 rsvp 和其他东西建立了一个网站。 Belethor 的商店将被设置为帮助那些不那么 Nerd 购买廉价 Angular 色扮演服装的人。其他一切都按我想要的方式工作，但 itempanel/itemcontainer/itemdisplay 不在我想要的显示区域中。

Answer 1

想通了。伪元素必须与您使用的填充相反。例如，使用它就像我预期的那样工作。事情总是很简单...

.itemdisplay::after{
  content: " ";
  display: block;
  padding-top: 100%;