html - বর্গ অনুপাত এবং ফ্লেক্সবক্স সহ অভ্যন্তরীণ ডিভ




css css3 (4)

আপনি যদি 90 ডিগ্রি দ্বারা আবর্তিত হন তবে এটি সম্ভব :)

  • পরিবর্তনশীল প্রস্থ এবং পিতামাতার উচ্চতা (এবং অনুপাত)
  • শিশু সর্বদা তার পিতামাতার চেয়ে 50% লম্বা হয়
  • এবং একটি বর্গ

যদিও এটি রূপান্তর করার কারণে যদি এটি চায় তবে এটি অন্য সামগ্রীতে পৌঁছে যাবে।

Codepen

.flex {
  display: table-cell; /* allows "vertical" centering (not possible with flex/grid here because of the padding-top trick on child) */
  width: 12rem;
  height: 20rem;
  vertical-align: middle; /* "vertical" centering */
  transform: rotate(90deg) translateY(-50%); /* vertical becomes horizontal */
  background-color: lightblue;
}

.flex.large {
  height: 35rem;
}

.item {
  width: 50%;
  height: 0;
  margin-left: 25%; /* "horizontal" centering */
  padding-top: 50%; /* padding-top trick for a square */
  background-color: lightyellow;
}
<div class="flex">
  <div class="item"></div>
</div>

<hr>

<div class="flex large">
  <div class="item"></div>
</div>

এই প্রশ্নের ইতিমধ্যে এখানে একটি উত্তর আছে:

আমি নিম্নলিখিতগুলি অর্জন করার চেষ্টা করছি:

যেখানে নীল বাক্সটি পরিবর্তনশীল উচ্চতার এবং হলুদ বাক্সটি সর্বদা নীল বাক্সের 50% উচ্চতার থাকে।

এটি ফ্লেক্স ব্যবহার করে মোটামুটি সহজ

<div style="display:flex;align-items:center">
    <div id="yellow" style="height:50%">
    </div>
</div>

সমস্যাটি হ'ল আমি এই ক্ষেত্রে বর্গক্ষেত্রে অভ্যন্তরীণ বাক্সকে একটি নির্দিষ্ট অনুপাত রাখার চেষ্টা করছি। আমি কিভাবে এই কাছে যেতে পারি?

বোনাস পয়েন্ট:

  • আমি সাধারণত একটি অনুপাত কীভাবে নির্দিষ্ট করব? এমন কোনও সমাধান রয়েছে যা কেবল 1: 1 এর জন্য নয় তবে কোনও এক্স: ওয়াইয়ের জন্য কাজ করে?
  • আমি কীভাবে এটি সম্ভাব্যতার জন্য লক্ষ্য রেখে ফ্লেক্সবক্স ব্যবহার না করে করব?

অতিরিক্ত তথ্য: নীল বাক্সটি সর্বদা উচ্চের চেয়ে প্রশস্ত থাকে, একটি বোতাম ভাবেন।


উচ্চতা ব্যবহার করে প্রস্থ নির্ধারণ করার কোনও উপায় আছে বলে আমি মনে করি না (এমনকি প্যাডিংয়ের মতো কিছু কৌশল ব্যবহার করে আমরা বিপরীতেও করতে পারি) তবে একটি ধারণাটি অনুপাত বজায় রাখার জন্য আপনি অদৃশ্য করে এমন একটি বর্গাকার চিত্রের উপর নির্ভর করতে পারেন ly । তারপরে সামগ্রীটি অবস্থান করা উচিত:

#blue {
  display: flex;
  align-items: center;
  justify-content:center;
  height:80vh;
  background: blue;
}

#yellow {
  height: 50%;
  background: yellow;
  position:relative;
}
img {
 max-height:100%;
 visibility:hidden;
}
#yellow .content {
  position:absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
}
<div id="blue" >
  <div id="yellow" >
    <img src="https://picsum.photos/500/500?image=1069" >
    <div class="content">Some content here</div>
  </div>
</div>

তবে নীলের উচ্চতা একটি স্থির মান হিসাবে, সিএসএস ভেরিয়েবলের উপর আরও ভাল নির্ভর করুন:

#blue {
  display: flex;
  align-items: center;
  justify-content:center;
  --h:80vh;
  height:var(--h);
  background: blue;
}

#yellow {
  height: calc(var(--h) / 2);
  width:calc(var(--h) / 2);
  background: yellow;
  position:relative;
}
<div id="blue" >
  <div id="yellow" >
    <div class="content">Some content here</div>
  </div>
</div>


এটি যদি আপনাকে সহায়তা করতে পারে তবে এটি চেষ্টা করুন (

     .outerdiv 
     {
     background-color: lightblue;
     height: 100px;
     display: grid;
     align-items: center;
     }
     .innerdiv 
     {
     background-color: lightyellow;
     height: 50%;
     width: 50px;
     margin:0 auto;
     }
     <div style="" class="outerdiv"> 
     <div id="yellow" class="innerdiv"></div>
     </div>

তেমনী আফিফের সরবরাহ করা জবাবের অনুরূপ উত্তর, তবে একটি চিত্রের পরিবর্তে একটি এসভিজি ব্যবহার করা হয়েছে (সুতরাং অতিরিক্ত অনুরোধের প্রয়োজন নেই)।

এছাড়াও, এটিকে নির্বিচারে দিক অনুপাতের সাথে মানিয়ে নেওয়া সহজ easier

.container {
  height: 150px;
  background-color: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
}

.aspectRatio {
  display: grid;
  background-color: yellow;
  height: 50%;
}
.aspectRatio svg {
  height: 100%;
  border: solid 1px red;
  animation: resize 1s infinite;
}
.aspectRatio > * {
  grid-area: 1 / 1 / 2 / 2;
}

@keyframes resize {
  from {height: 100%;}
  to {height: 99.9%;}
}
<div class="container">
  <div class="aspectRatio">
    <svg viewBox="0 0 1 1"></svg>
    <div class="inner">square</div>
  </div>
</div>
<div class="container">
  <div class="aspectRatio">
    <svg viewBox="0 0 4 3"></svg>
    <div class="inner">ratio 4/3</div>
  </div>
</div>







flexbox