css 方形限制大小和 position 到父 div

Question

我試圖讓一個正方形的大小有限，並保持在父 div 的范圍內並干凈地縮放。 我可以得到其中的一兩個，但不是全部。

設置是我有一個主 div，左邊有兩列 div，右邊有一個 div 占用剩余空間。 我希望右側的 div 包含正方形，並且正方形的邊界保持在父 div 內。 如果我不使用 padding-bottom 讓它保持正方形，我可以讓它保持原樣，但是這個項目的圖片看起來很糟糕。

看看我的js bin 。 擊中方塊的途徑是：武器->物品b1->點擊使其停留

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 的商店將幫助那些不那么書呆子購買廉價角色扮演服裝的人。 其他一切都像我想要的那樣工作，但是 itempanel/itemcontainer/itemdisplay 不在我想要的顯示區域中。

Answer 1

我看到您已經創建了一個 class .bottommenu ，但我沒有看到它被應用到您的 HTML 或 JavaScript 的任何地方。 如果您想使用 Flex-box 顯示兩行並且您不太確定圖像或內容的高度，您可以將該父容器設置為height: auto並在您的子容器上使用align-self: flex-end來處理項目的定位，並在您的父級上使用justify-content或align-content根據您的喜好。 像這樣的東西：

div .parent {
   display:flex;
   height: auto;
   min-width: 300px;
 }

div .child {
   align-self: center;
   width: 100%;
   min-height: 50%;
   height: auto;
   margin: 0 auto;
}

希望有幫助。

Answer 2

弄清楚了。 偽元素必須與您使用的填充相反。 例如，使用它就像我預期的那樣工作。 總是很簡單的事情...

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