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

Question 1

আমি কীভাবে কোনও চিত্রকে আবার আকার দিতে হবে তা জানার চেষ্টা করছি যাতে এটি এটিকে প্রস্থের উচ্চতার সাথে অনুপাত বজায় রাখে, তবে যতক্ষণ না চিত্রের উচ্চতাটি উপস্থিত ডিভের উচ্চতার সাথে মেলে না re আমার কাছে এই চিত্রগুলি রয়েছে যা বেশ বড় এবং দীর্ঘ (স্ক্রিনশট) এবং আমি এগুলিকে 200px প্রস্থ, 180px উচ্চতার ডিভিতে প্রদর্শন করতে এবং চিত্রগুলিকে ম্যানুয়ালি পুনরায় আকার না দিয়ে রাখতে চাই। এই চেহারাটি ভাল করার জন্য, চিত্রটির উভয় দিকগুলি উপচে পড়া এবং ডিভযুক্ত ডিভের সাথে লুকিয়ে রাখা দরকার। আমার এ পর্যন্ত যা আছে:

http://jsfiddle.net/f9krj/2/

এইচটিএমএল

<a class="image_container" href="http://www.skintype.ca/assets/background-x_large.jpg">
    <img src="http://www.skintype.ca/assets/background-x_large.jpg" alt="" />
</a>

সিএসএস

a.image_container {
    background-color: #999;
    width: 200px;
    height: 180px;
    display: inline-block;
    overflow: hidden;
}
a.image_container img {
    width: 100%;
}

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

Question 2

আসল উত্তর:

আপনি যদি CSS3 এর জন্য অপ্ট করতে প্রস্তুত হন তবে আপনি CSS3 অনুবাদ সম্পত্তি ব্যবহার করতে পারেন। যা বড় তা নির্ভর করে আকার পরিবর্তন করুন। আপনার উচ্চতা যদি বড় এবং প্রস্থের ধারকের চেয়ে ছোট হয়, প্রস্থটি প্রসারিত হবে 100% এবং উচ্চতা উভয় দিক থেকে ছাঁটা হবে। একই বৃহত্তর প্রস্থ জন্য যায়।

আপনার প্রয়োজন, এইচটিএমএল:

<div class="img-wrap">
  <img src="http://lorempixel.com/300/160/nature/" />
</div>
<div class="img-wrap">
  <img src="http://lorempixel.com/300/200/nature/" />
</div>
<div class="img-wrap">
  <img src="http://lorempixel.com/200/300/nature/" />
</div>

এবং সিএসএস:

.img-wrap {
  width: 200px;
  height: 150px;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 0;
}

div > img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  transform: translate(-50%, -50%);
}

ভয়েলা! কাজ করছে: http://jsfiddle.net/ Shekhardesigner / aYrhG/

ব্যাখ্যা

ডিআইভি relativeপজিশনে সেট করা আছে । এর অর্থ এই ডিআইভিটি যেখান থেকে শুরু হয় সমস্ত শিশু উপাদান সূচনা স্থানাঙ্ক (উত্স) পাবে।

চিত্রটি একটি ব্লক উপাদান হিসাবে min-width/heightসেট করা আছে , উভয়ই সেট করা 100% এর চিত্রটি এর আকারের বিবেচনা না করে তার পিতামাতার ন্যূনতম 100% হওয়া উচিত। minচাবিকাঠি যদি ন্যূনতম উচ্চতা দ্বারা হয় তবে চিত্রের উচ্চতা পিতামাতার উচ্চতা ছাড়িয়ে গেছে, কোনও সমস্যা নেই। এটি ন্যূনতম প্রস্থের জন্য অনুসন্ধান করবে এবং ন্যূনতম উচ্চতাটি 100% পিতামাতার হতে সেট করার চেষ্টা করবে। দুজনেই তদ্বিপরীত হয়। এটি নিশ্চিত করে যে ডিভের চারপাশে কোনও ফাঁক নেই তবে চিত্র সর্বদা কিছুটা বড় এবং এর দ্বারা ছাঁটা হয়overflow:hidden;

এখন image, এটি এবং এর absoluteসাথে একটি অবস্থানে সেট করা আছে । অর্থটি ডিআইভি থেকে উত্স নেওয়া হয়েছে তা নিশ্চিত করে উপর থেকে এবং বাম দিক থেকে চিত্রটি 50% ঠেলা দেয়। বাম / শীর্ষ ইউনিটগুলি পিতামাতার কাছ থেকে পরিমাপ করা হয়।left:50%top:50%

যাদু মুহূর্ত:

transform: translate(-50%, -50%);

এখন, translateCSS3 বৈশিষ্ট্যের এই ফাংশনটি transformপ্রশ্নে থাকা একটি উপাদানকে সরায় / প্রতিস্থাপন করে। এই সম্পত্তিটি প্রয়োগকৃত উপাদানগুলির সাথে কাজ করে তাই মানগুলি (x, y) বা (-50%, -50%) অর্থ চিত্রের নেতিবাচক বামটিকে চিত্রের 50% দ্বারা সরিয়ে নিয়ে ইমেজ আকারের 50% দ্বারা নেতিবাচক শীর্ষে স্থানান্তরিত করতে পারে ।

যেমন যদি চিত্রের আকার 200px × 150px হয়, transform:translate(-50%, -50%)তা অনুবাদ করতে গণনা করা হবে (-100px, -75px)। % ইউনিট সাহায্য করে যখন আমাদের বিভিন্ন আকারের চিত্র থাকে।

চিত্র এবং পিতামাতার ডিআইভির সেন্ট্রয়েড বের করার এবং তাদের সাথে মেলে দেখার এটি কেবল একটি কৌশল way

ব্যাখ্যা করতে খুব বেশি সময় লাগার জন্য দুঃখিত!

আরও পড়ার সংস্থান:

Question 3

আপনার কোড পরিবর্তন করুন:

a.image_container img {
    width: 100%;
}

এটি:

a.image_container img {
    width: auto; // to maintain aspect ratio. You can use 100% if you don't care about that
    height: 100%;
}

http://jsfiddle.net/f9krj/5/

Question 4

max-widthসিএসএসের সম্পত্তি ব্যবহার করুন :

img{
  max-width:100%;
}

Question 5

আপনি যদি উত্তরটির শিখর কে শর্মা গ্রহণ করেন এবং এটি প্রায় কাজ করে তবে অবশ্যই কাজ করার জন্য আপনার নিজের height: 1px;বা এটি যুক্ত করা দরকার width: 1px;।

Question 6

আপনি এটির জন্য ফ্লেক্স বক্স ব্যবহার করতে পারেন .. এটি আপনার সমস্যার সমাধান করবে

.image-parent 
{
     height:33px; 
     display:flex; 
}

Question 7

যদি আপনার সমস্ত চেষ্টাটি ডিভিটি পূরণ করা হয় তবে এটি অন্য কাউকে সহায়তা করতে পারে, যদি অনুপাতের অনুপাতটি গুরুত্বপূর্ণ না হয় তবে এটি প্রতিক্রিয়াশীল।

.img-fill > img {
  min-height: 100%;
  min-width: 100%;  
}