অনুপাত অনুপাত বজায় রাখার চেয়ে ফ্লেক্সবক্স কেন আমার চিত্র প্রসারিত করে?

Question

ফ্লেক্সবক্সের এমন আচরণ রয়েছে যেখানে এটি চিত্রগুলি তাদের প্রাকৃতিক উচ্চতায় প্রসারিত করে। অন্য কথায়, যদি আমার কাছে চাইল্ড ইমেজ সহ একটি ফ্লেক্সবক্স ধারক থাকে এবং আমি সেই চিত্রটির প্রস্থকে আকার পরিবর্তন করি তবে উচ্চতাটি মোটেও আকার পরিবর্তন করে না এবং চিত্রটি প্রসারিত হয়।

div {
  display: flex; 
  flex-wrap: wrap;
}
img{ 
  width: 50%
}

<div>
    <img src="https://loremflickr.com/400/300" >
    <h4>Appify</h4>
    <p> some text </p>
</div>

এর কারণ কী?

আমি কী বলতে চাইছি তা প্রদর্শনের জন্য আমি এই কোডপেন যুক্ত করেছি।

Comments

ফায়ারফক্স এবং আইই ভাল কাজ করে। ক্রোমে আপনি align-self:flex-start ইমেজটি দিয়ে ঠিক করতে পারেন । কেন জানি না, সম্ভবত ক্রোমের ডিফল্ট মানটি প্রসারিত।

উচ্চতা যোগ করুন: 100%; আইএমজি সমস্যা সমাধানের জন্য, আমি কেন এটি চিত্রটিকে প্রসারিত করে তা জানতে চাই।

— পারান0

@ ব্লনফু, সমস্ত ব্রাউজারের ডিফল্ট মান হয় align-items: stretch/ align-self: stretch। আপনি যদি প্রতিটি আইটেমের চারপাশে একটি সীমানা যুক্ত করেন এবং সরিয়ে ফেলেন তবে wrapআপনি সমস্ত ব্রাউজারগুলিতে সমস্ত আইটেম প্রসারিত দেখতে পাবেন: codepen.io/anon/pen/oLXBVx?editors=1100

— মাইকেল বেঞ্জামিন

ঠিক আছে। আমি এটি শিখি তবে ক্রোম এবং অন্য ব্রাউজারে চিত্রগুলি আলাদাভাবে কাজ করে। আপনি উচ্চতা সংজ্ঞায়িত না করলে Chrome অনুপাত অনুপাতকে সম্মান করে না।

@ ব্লনফু, হ্যাঁ ব্রাউজারের অসঙ্গতি এবং আরও দানাদার স্তরের কোনও প্রশ্ন নেই।

— মাইকেল বেঞ্জামিন

Answer 1

এটি প্রসারিত কারণ align-selfডিফল্ট মান stretch। সেট align-selfকরুন center।

align-self: center;

ডকুমেন্টেশন এখানে দেখুন: স্বতঃ সারিবদ্ধ

Comments

হ্যাঁ তবে অন্যান্য ব্রাউজারগুলি চিত্রগুলিতে অনুপাতের অনুপাতটি ধরে রাখে। ক্রোম বা

আমি মনে করি align-self: start;এটি একটি শক্তিশালী উত্তর হতে পারে কারণ চিত্রগুলি উল্লিখিতভাবে কোনও স্টাইললেস চিত্রের (কোনও সিএসএস) পছন্দ মতো তাদের পাত্রে শীর্ষে স্থির করা উচিত (মাঝখানে নয়)। যেভাবেই হোক, উভয় উত্তরই প্রসারিত স্থির করে। সুতরাং এটি ওপি অবশ্যই যা চায় তার উপর নির্ভর করে - কেবল ওপির পোস্ট থেকে 'উল্লম্ব কেন্দ্রিক' ধারণাটি পান নি।

— টুড

যদি আপনি কোনও চিত্রের কোনও প্রস্থ নির্ধারণ না করেন এবং এটি একটি ফ্লেক্স-ধারকটিতে থাকে তবে এটি প্রসারিত হবে 100%। align-self: [flex-start, center...others]চিত্রটি ফ্লেক্স-ধারকগুলির প্রস্থের 100% নেওয়া থেকে প্রতিরোধ করবে। align-self:centerএটি অবশ্যই ঠিক করে দেয় তবে আপনি যদি চান যে আপনার চিত্রটি ধারক ব্যবহারের শুরু বা শেষ থেকে শুরু হয়align-items: flex-start or flex-end

— কাকোডার

আপনি align-items: centerপিতামাতার উপর (বা যাই হোক না কেন প্রান্তিককরণ আপনার প্রয়োজন অনুসারে) রাখতে পারেন।

— ইলেক্ট্রোভির

Answer 2

কী অ্যাট্রিবিউট align-self: center:

.container {
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
}

img.align-self {
  align-self: center;
}

<div class="container">
    <p>Without align-self:</p>
    <img src="http://i.imgur.com/NFBYJ3hs.jpg" />
    <p>With align-self:</p>
    <img class="align-self" src="http://i.imgur.com/NFBYJ3hs.jpg" />
</div>

Answer 3

আমি ফাউন্ডেশন মেনুতে একই সমস্যার মুখোমুখি হয়েছি। align-self: center;আমার জন্য কাজ করেনি।

আমার সমাধানটি ছিল একটি দিয়ে চিত্রটি মোড়ানো rap <div style="display: inline-table;">...</div>

Comments

এটি যদিও ফ্লেক্সবক্স সম্পর্কে।

এই হল flexbox জন্য একটি সমাধান। ইমেজ এবং ডিভ একটি ফ্লেক্সবক্স ধারকের ভিতরে।

— ইস্পির

Answer 4

marginচিত্রগুলি সারিবদ্ধ করার জন্য যুক্ত করা হচ্ছে :

যেহেতু আমরা এটি imageহতে চেয়েছিলাম left-aligned, তাই আমরা যুক্ত করেছি:

img {
  margin-right: auto;
}

একইভাবে জন্য imageহতে right-aligned, আমরা যোগ করতে পারেন margin-right: auto;। স্নিপেট উভয় ধরণের প্রান্তিককরণের জন্য একটি ডেমো দেখায়।

শুভকামনা ...

div {
  display:flex; 
  flex-direction:column;
  border: 2px black solid;
}

h1 {
  text-align: center;
}
hr {
  border: 1px black solid;
  width: 100%
}
img.one {
  margin-right: auto;
}

img.two {
  margin-left: auto;
}

<div>
  <h1>Flex Box</h1>
  
  <hr />
  
  <img src="https://via.placeholder.com/80x80" class="one" 
  />
  
  
  <img src="https://via.placeholder.com/80x80" class="two" 
  />
  
  <hr />
</div>

Answer 5

এটি প্রসারিত কারণ অ্যালাইন-স্ব-ডিফল্ট মান প্রসারিত। এই ক্ষেত্রে দুটি সমাধান রয়েছে: 1. img align-self: Center or 2 সেট করুন পিতামাতার প্রান্তিককরণ-আইটেমগুলি: কেন্দ্র

img

   সারিবদ্ধ-স্ব: কেন্দ্র
}

অথবা

.পিতা {
  সারিবদ্ধ-আইটেম: কেন্দ্র
}