मेरे पास एक सीएसएस पहलू अनुपात संरक्षित बॉक्स है, हालांकि मैं इसे बनाने की कोशिश कर रहा हूं ताकि बच्चे की ऊंचाई पहलू अनुपात की ऊंचाई से अधिक हो तो बॉक्स की ऊंचाई बढ़ जाएगी।

यहाँ मेरे पास वर्तमान में है:

const box = document.querySelector(".box");
const inner = box.querySelector(".box-inner");
const content = box.querySelector(".box-content");

function updateBox() {
  const innerRect = inner.getBoundingClientRect();
  const contentRect = content.getBoundingClientRect();
  const expandHeight = contentRect.height > innerRect.height;

  inner.style.paddingBottom = expandHeight ? "0" : "100%";
  inner.style.height = expandHeight ? "auto" : "0";
  content.style.position = expandHeight ? "relative" : "absolute";
}

updateBox();
window.addEventListener("resize", updateBox);
.box {
  width: 100%;
  max-width: 100px;
  background-color: pink;
  position: relative;
}

.box-inner {
  height: 0;
  padding-bottom: 100%;
}

.box-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
<div class="box">
  <div class="box-inner">
    <div class="box-content">
      <div style="width: 50%; height: 125px; background-color: rgba(255, 0, 0, 0.5)">
        content
      </div>
    </div>
  </div>
</div>

यह काम करता है, हालांकि जब खिड़की का आकार बदलता है तो झिलमिलाहट होती है। क्या इसे हल करने का कोई तरीका है?

0
Enijar 10 सितंबर 2020, 15:10

1 उत्तर

सबसे बढ़िया उत्तर

>= (इससे बड़ा या इसके बराबर) समस्या का समाधान करता है

contentRect.height >= innerRect.height
const box = document.querySelector(".box");
const inner = box.querySelector(".box-inner");
const content = box.querySelector(".box-content");

function updateBox() {
  const innerRect = inner.getBoundingClientRect();
  const contentRect = content.getBoundingClientRect();
  const expandHeight = contentRect.height >= innerRect.height;

  inner.style.paddingBottom = expandHeight ? "0" : "100%";
  inner.style.height = expandHeight ? "auto" : "0";
  content.style.position = expandHeight ? "relative" : "absolute";
}

updateBox();
window.addEventListener("resize", updateBox);
.box {
  width: 100%;
  max-width: 100px;
  background-color: pink;
  position: relative;
}

.box-inner {
  height: 0;
  padding-bottom: 100%;
}

.box-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
<div class="box">
  <div class="box-inner">
    <div class="box-content">
      <div style="width: 50%; height: 125px; background-color: rgba(255, 0, 0, 0.5)">
        content
      </div>
    </div>
  </div>
</div>
1
User863 10 सितंबर 2020, 15:19