সর্বোচ্চ-উচ্চতা সম্পন্ন শিশু: 100% ওভারফ্লোস প্যারেন্ট

Question

আমার কাছে কী অপ্রত্যাশিত আচরণ বলে মনে হচ্ছে তা বোঝার চেষ্টা করছি:

আমার একটি ধারকের ভিতরে সর্বোচ্চ 100% উচ্চতা সহ একটি উপাদান রয়েছে যা সর্বাধিক উচ্চতাও ব্যবহার করে তবে অপ্রত্যাশিতভাবে শিশু পিতামাতাকে উপচে ফেলে:

পরীক্ষার কেস: http://jsfiddle.net/bq4Wu/16/

.container {  
    background: blue; 
    padding: 10px; 
    max-height: 200px; 
    max-width: 200px; 
}

img { 
    display: block;
    max-height: 100%; 
    max-width: 100%; 
}

এটি ঠিক করা হয়েছে, তবে পিতামাতার একটি সুস্পষ্ট উচ্চতা দেওয়া থাকলে:

পরীক্ষার কেস: http://jsfiddle.net/bq4Wu/17/

.container {  
    height: 200px;
}

কেউ কি জানেন যে শিশু কেন প্রথম উদাহরণে তার পিতামাতার সর্বোচ্চ-উচ্চতার সম্মান করবে না? কেন একটি স্পষ্ট উচ্চতা প্রয়োজন?

Answer 1

আপনি যখন max-heightকোনও সন্তানের জন্য শতাংশ নির্ধারণ করেন , এটি পিতামাতার প্রকৃত উচ্চতার শতাংশ, না পিতামাতার max-height, বিস্ময়করভাবে যথেষ্ট । একই প্রযোজ্যmax-width ।

সুতরাং, যখন আপনি পিতামাতার উপরে সুস্পষ্ট উচ্চতা নির্দিষ্ট না করেন, তারপরে সন্তানের পক্ষে max-heightগণনা করার কোনও ভিত্তি উচ্চতা নেই , তাই max-heightগণনা করুন none, সন্তানের যতটা সম্ভব লম্বা হতে দিন। সন্তানের উপর অভিনয় করা কেবলমাত্র অন্য প্রতিবন্ধকতাmax-width তার পিতামাতার, এবং যেহেতু চিত্রটি নিজেই প্রশস্তের চেয়ে লম্বা, তাই এটির দিকের অনুপাত বজায় রাখতে এবং সামগ্রিকভাবে যতটা সম্ভব বৃহত্তর হয়ে উঠার জন্য এটি ধারকটির উচ্চতা নীচের দিকে উপচে পড়ে।

যখন আপনি কি পিতা বা মাতা জন্য একটি সুনির্দিষ্ট উচ্চতা নির্ধারণ, তারপর সন্তান জানে যে স্পষ্ট উচ্চতা অধিকাংশ 100% এ হতে হয়েছে। এটি এটিকে পিতামাতার উচ্চতায় সীমাবদ্ধ রাখতে দেয় (এখনও তার দিক অনুপাত বজায় রাখার সময়)।

Comments

এটি একটি দরকারী ব্যাখ্যা, বিশেষত আমার বন্ধুর ইনপুটটির সাথে মিশ্রিত: "সর্বাধিক উচ্চতা: সর্বাধিক উচ্চতার 100% (শিশু): 100% (পিতামাতার) = 0 - এই কারণেই আপনার শিশু তার পিতামাতার মানকে সম্মান করছে না"।

— iamkeir

আমি কোন উত্তর গ্রহণ করবেন তা নিশ্চিত নই - এটি 'কেন' উত্তর দেয়।

— iamkeir

আমি কেবল 'কেন' জবাব দিয়েছি কারণ আপনার লক্ষ্যটি কী তা স্পষ্টভাবে উল্লেখ করা হয়নি বলে আমি নিশ্চিত নই। আপনি যদি সে সম্পর্কে বিশদভাবে বর্ণনা করেন তবে আমি এটির উত্তর দিতে পারি।

— BoltClock

এটি আমার প্রকৃত প্রশ্নের উত্তর হিসাবে এটি গ্রহণ করেছে, আপনাকে ধন্যবাদ। দয়া করে নোট করুন ড্যানিয়েলের উত্তর নীচে একটি সমাধান দেয় offers

— আইমকির

আমার ক্ষেত্রে display: flex; flex-direction: columnসমস্যাটি সমাধান করা এবং আমি যে স্ক্রোলবারটি চেয়েছিলাম তা যুক্ত করলাম।

— xdevs23

Answer 2

.container {
  background: blue;
  padding: 10px;
  max-height: 200px;
  max-width: 200px;
  float: left;
  margin-right: 20px;
}

.img1 {
  display: block;
  max-height: 100%;
  max-width: 100%;
}

.img2 {
  display: block;
  max-height: inherit;
  max-width: inherit;
}

<!-- example 1  -->
<div class="container">
  <img class='img1' src="http://via.placeholder.com/350x450" />
</div>

<!-- example 2  -->

<div class="container">
  <img class='img2' src="http://via.placeholder.com/350x450" />
</div>

আমি একটু ঘুরেছি। ফায়ারফক্সে আরও বড় চিত্রটিতে উত্তরাধিকার সম্পত্তি সম্পত্তি ব্যবহার করে আমি একটি ভাল ফলাফল পেয়েছি। এই আপনাকে সাহায্য করবে?

.container {
    background: blue;
    padding: 10px;
    max-height: 100px;
    max-width: 100px;
    text-align:center;
}

img {
    max-height: inherit;
    max-width: inherit;
}

Comments

আমি কোন উত্তর গ্রহণ করবেন তা নিশ্চিত নই - এটি 'ফিক্স' এর উত্তর দেয়।

— আইমকেয়ার

কারণটির জবাব দেওয়ার জন্য @ বোল্টক্লক গৃহীত হয়েছে তবে ঠিক করার প্রস্তাব দেওয়ার জন্য আপনাকে ধন্যবাদ।

— আইমকির

@ বোল্টক্লক ছাড়াও, আমার উত্তর তিনি যা বলেছেন ঠিক তা করছে। সিএসএস কম্পিউটারকে কেবল একটি উপাদানকে কীভাবে পরিচালনা করতে হবে তা বলছে, তবে গণনার পরে এটি উচ্চতা, প্রস্থ, রঙ, স্থানাঙ্ক, যেমন ... রেন্ডারিংয়ের জন্য প্রয়োজনীয় সমস্ত মানগুলিকে নীচে সীমাবদ্ধ করবে ... উত্তরাধিকারী সম্পত্তিটি ইমগকে বলছে পিতামাতার "গণিত" মান নিন। সুতরাং আপনি সর্বোচ্চ এবং উচ্চতা এবং সর্বোচ্চ-প্রস্থের CSS বৈশিষ্ট্যগুলিতে উচ্চতা এবং প্রস্থের জন্য গণিত মানগুলি পান।

— ড্যানিয়েল

max:height: 100%স্থির উচ্চতার পরিবর্তে এটি কাজ করে না : jsfiddle.net/umbreak/n6czk9xt/1

— ডিডাক মন্টেরো

আমি স্থির কারণ হিসাবে প্রস্থ এবং উচ্চতা ঘোষণা করতে পারি না আমার লেআউটটি প্রতিক্রিয়াশীল dispaly: flex;। আমি একটি নতুন থ্রেড খুললাম: আমি নতুন থ্রেডটি খুললাম: স্ট্যাকওভারফ্লো / প্রশ্নগুলি / 29732391/… তবে আরও খারাপ ক্ষেত্রে আমি জ্যাকুরিকে আইএমজি আসল প্রস্থ এবং উচ্চতা আনতে এবং সেগুলি পিতামাতার চিত্রের ডিভে সেট করতে পারি।

— ডিডাক মন্টেরো

Answer 3

আমি এখানে একটি সমাধান পেয়েছি: http://www.sitepPoint.com/maintain-image-aspect-ratios-responsive-web-design/

কৌশলটি সম্ভব কারণ এটি কোনও উপাদানের WIDTH এবং প্যাডিং-বটমের মধ্যে একটি সম্পর্ক বিদ্যমান। তাই:

পিতা বা মাতা:

container {
  height: 0;
  padding-bottom: 66%; /* for a 4:3 container size */
  }

শিশু ( প্রস্থ সম্পর্কিত সমস্ত সিএসএস , অর্থাৎ প্রস্থ: 100% মুছে ফেলুন ):

img {
  max-height: 100%;
  max-width: 100%;
  position: absolute;     
  display:block;
  margin:0 auto; /* center */
  left:0;        /* center */
  right:0;       /* center */
  }

Answer 4

আপনি সম্পত্তি অবজেক্ট ব্যবহার করতে পারেন

.cover {
    object-fit: cover;
    width: 150px;
    height: 100px;
}

এখানে প্রস্তাবিত মত

এই সম্পত্তির সম্পূর্ণ ব্যাখ্যাদেব.ওপেরা-তে ক্রিস মিলসের

এবং আরও ভাল এক সিএসএস-ট্রিকস মধ্যে

এটি সমর্থিত

• ক্রোম 31+
• সাফারি 7.1+
• ফায়ারফক্স 36+
• অপেরা 26+
• Android 4.4.4+
• আইওএস 8+

আমি কেবল পরীক্ষা করে দেখেছি যে ভিভালদি এবং ক্রোমিয়াম এটি সমর্থন করে (এখানে কোনও আশ্চর্যের কিছু নেই)

এটি বর্তমানে IE এ সমর্থিত নয়, তবে ... কে যত্ন করে ? এছাড়াও, আইওএস অবজেক্ট-ফিটকে সমর্থন করে তবে অবজেক্ট-পজিশন নয়, তবে শীঘ্রই তা ঘটবে।

Comments

ভাল বিকল্প! আমি কল্পনা করি যে ফ্লেক্স-বাক্সটি সম্ভবত সম্ভাব্যভাবে সহায়তা করতে পারে, যদি আইইয়ের মধ্যে সুক্ষ্ম অবনতি গ্রহণযোগ্য হয়।

— ইমকায়ার

Answer 5

এই প্রশ্নের সদৃশ হিসাবে চিহ্নিত একটি সম্প্রতি খোলা প্রশ্নের সমাধান এখানে । <img>ট্যাগ পিতা বা মাতা ম্যাক্স উচ্চতা হলেন <div>।

ভাঙা: ফিডল

কাজ: ফিডল

এই ক্ষেত্রে, display:flex2 পিতামাতার <div>ট্যাগগুলিতে যুক্ত হওয়া উত্তর ছিল

Answer 6

সর্বোচ্চ-উচ্চতা: 100% / 100% দিয়ে না যাওয়ার পরিবর্তে সমস্ত স্থান পূরণ করার একটি বিকল্প পদ্ধতির position: absoluteশীর্ষ / নীচে / বাম / ডান সেট 0 দিয়ে ব্যবহার করা হবে ।

অন্য কথায়, এইচটিএমএল নীচের মত দেখতে হবে:

<div class="flex-content">
  <div class="scrollable-content-wrapper">
    <div class="scrollable-content">
      1, 2, 3
    </div>
   </div>
</div>

.flex-content {
  flex-grow: 1;
  position: relative;
  width: 100%;
  height: 100%;
}

.scrollable-content-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
}

.scrollable-content {
}

আপনি কোডস্যান্ডবক্সে একটি সরাসরি উদাহরণ দেখতে পাবেন - সিএসএস ফ্লেক্স / গ্রিডের মধ্যে ওভারফ্লো

Answer 7

হতে পারে অন্য কেউ আপনার সমস্যার পিছনে কারণগুলি ব্যাখ্যা করতে পারে তবে আপনি ধারকটির উচ্চতা উল্লেখ করে এবং তারপরে চিত্রটির উচ্চতা 100% নির্ধারণ করে সমাধান করতে পারেন। এটি গুরুত্বপূর্ণ যে widthচিত্রটির আগে উপস্থিত হওয়া উচিত height।

<html>
    <head>
        <style>
            .container {  
                background: blue; 
                padding: 10px;
                height: 100%;
                max-height: 200px; 
                max-width: 300px; 
            }

            .container img {
                width: 100%;
                height: 100%
            }
        </style>
    </head>
    <body>
        <div class="container">
            <img src="http://placekitten.com/400/500" />
        </div>
    </body>
</html>

Comments

যদি তারা চান যে চিত্রটি 200x200 এর চেয়ে ছোট হয় তবে ধারকটি ছোট হয়ে উঠতে পারে, তবে হ্যাঁ, এটি ন্যূনতম উচ্চতা / সর্বোচ্চ-উচ্চতা দিয়ে করতে হবে।

— cimmanon

Answer 8

আমি এর নিকটতম নিকটতম উদাহরণটি হ'ল:

http://jsfiddle.net/YRFJQ/1/

অথবা

.container {  
  background: blue; 
  border: 10px solid blue; 
  max-height: 200px; 
  max-width: 200px; 
  overflow:hidden;
  box-sizing:border-box;
}

img { 
  display: block;
  max-height: 100%; 
  max-width: 100%; 
}

মূল সমস্যাটি হ'ল উচ্চতাটি ধারকগুলির উচ্চতার শতাংশের পরিমাণ নেয় তাই এটি প্যারেন্ট পাত্রে একটি সুস্পষ্টভাবে উচ্চতা সন্ধান করছে, এটি সর্বোচ্চ-উচ্চতা নয়।

আমি কেবলমাত্র কিছু পরিমাণে দেখতে পাচ্ছি এটিই উপরের ফিটলটি যেখানে আপনি ওভারফ্লোটি আড়াল করতে পারেন তবে প্যাডিংটি চিত্রের প্রবাহিত হওয়ার জন্য এখনও দৃশ্যমান স্থান হিসাবে কাজ করে, এবং এর পরিবর্তে শক্ত পাড় দিয়ে প্রতিস্থাপন কাজ করে (এবং তারপরে) আপনার প্রস্থের যদি প্রস্থের প্রয়োজন হয় তবে এটি 200px বর্ডার বক্স যুক্ত করুন

আপনার এটির জন্য যা প্রয়োজন এটি এটি খাপ খায় কিনা তা নিশ্চিত নন, তবে আমি যা সেরা তা পেতে পারি বলে মনে হয়।

Comments

দুর্ভাগ্যক্রমে চিত্রটি কাটা আদর্শ নয়। যদিও আপনার ইনপুট জন্য ধন্যবাদ।

— আইমকির

Answer 9

একটি ভাল সমাধান হ'ল পিতামাতার উপর উচ্চতা ব্যবহার না করা এবং এটি কেবল পোর্ট সহ শিশুকে ব্যবহার করুন :

ফিডাল উদাহরণ: https://jsfiddle.net/voan3v13/1/

body, html {
  width: 100%;
  height: 100%;
}
.parent {
  width: 400px;
  background: green;
}

.child {
  max-height: 40vh;
  background: blue;
  overflow-y: scroll;
}

Answer 10

পাত্রে ইতিমধ্যে সাধারণত তাদের সামগ্রী সুন্দরভাবে মোড়ানো হবে। এটি প্রায়শই অন্যান্য উপায়ে কাজ করে না: বাচ্চারা তাদের পূর্বপুরুষদের সুন্দরভাবে পূরণ করে না। সুতরাং, আপনার প্রস্থ / উচ্চতার মানগুলি বাইরের সর্বাধিক উপাদানগুলির চেয়ে অভ্যন্তরীণ-সর্বাধিক উপাদানের উপর সেট করুন এবং বাহ্যিক উপাদানগুলিকে তাদের সামগ্রীগুলি মোড়ানো দিন।

.container {
    background: blue;
    padding: 10px;
}

img {
    display: block;
    max-height: 200px;
    max-width: 200px;
}

Comments

ভাল লাগবে, আমি এই পছন্দ করি

— আইমকেয়ার

Answer 11

আপনার ধারকটির উচ্চতা নেই।

উচ্চতা যুক্ত করুন: 200px;

পাত্রে সিএসএস এবং কিটি ভিতরে থাকবে।

Comments

ইনপুটটির জন্য ধন্যবাদ তবে আমি ওপিতে এটি সনাক্ত করতে পারি।

— iamkeir