আমি কীভাবে CSS এর মাধ্যমে বিভিন্ন উচ্চতা এবং প্রস্থের সমস্ত চিত্র একই করতে পারি?

Question 1

আমি পণ্যের ছবি সমন্বিত একটি চিত্র প্রাচীর তৈরি করার চেষ্টা করছি। দুর্ভাগ্যক্রমে, তাদের সবগুলিই বিভিন্ন উচ্চতা এবং প্রস্থের। সমস্ত চিত্রকে একই আকার হিসাবে দেখানোর জন্য আমি কীভাবে CSS ব্যবহার করতে পারি? সাধারণত 100 x 100।

আমি একটি ডিভি করার কথা ভাবছিলাম যার উচ্চতা এবং প্রস্থ 100px এবং তারপরে কিছু এটি কীভাবে পূরণ করবে। কীভাবে করবেন তা নিশ্চিত নয়।

আমি কীভাবে এটি সম্পাদন করতে পারি?

Question 2

আপডেট করা উত্তর (কোনও আইই 11 সমর্থন নেই)

img {
    float: left;
    width:  100px;
    height: 100px;
    object-fit: cover;
}

<img src="http://i.imgur.com/tI5jq2c.jpg">
<img src="http://i.imgur.com/37w80TG.jpg">
<img src="http://i.imgur.com/B1MCOtx.jpg">

স্নিপেট প্রসারিত করুন

আসল উত্তর

.img {
    float: left;
    width:  100px;
    height: 100px;
    background-size: cover;
}

<div class="img" style="background-image:url('http://i.imgur.com/tI5jq2c.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/37w80TG.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/B1MCOtx.jpg');"></div>

স্নিপেট প্রসারিত করুন

Question 3

আমি কি কেবল এটি ফেলে দিতে পারি যদি আপনি আপনার চিত্রগুলি অত্যধিক বিকৃত করেন, অর্থাত্ অনুপাতের বাইরে নিয়ে যান তবে এগুলি সঠিক দেখাচ্ছে না, - খুব সামান্য পরিমাণ ভাল, তবে এটি করার একটি উপায় হ'ল চিত্রগুলি একটি 'ধারক' এর ভিতরে রাখা এবং ধারকটিকে 100 x 100 তে সেট করুন, তারপরে আপনার চিত্রটিকে কোনওরূপে ওভারফ্লো না করে সেট করুন এবং ধারকটির সর্বাধিক প্রস্থে ছোটতম প্রস্থকে সেট করুন, এটি আপনার চিত্রের কিছুটা কাটবে যদিও,

উদাহরণ স্বরূপ

<h4>Products</h4>
<ul class="products">
    <li class="crop">
        <img src="ipod.jpg" alt="iPod" />
    </li>
</ul>



.crop {
 height: 300px;
 width: 400px;
 overflow: hidden;
}
.crop img {
 height: auto;
 width: 400px;
}

এইভাবে চিত্রটি তার ধারকটির আকার ধরে রাখবে, তবে বাধা ছাড়াই আকার পরিবর্তন করবে

Question 4

সহজতম উপায় - এটি চিত্রের আকারটিকে যেমন রাখবে তেমনই রাখবে এবং অন্যান্য ক্ষেত্রটি স্থান পূরণ করবে, এইভাবে সমস্ত চিত্রই প্রসারিত ছাড়াই চিত্রের আকার নির্বিশেষে একই নির্দিষ্ট স্থান গ্রহণ করবে

.img{
   width:100px;
   height:100px;

/*Scale down will take the necessary specified space that is 100px x 100px without stretching the image*/
    object-fit:scale-down;

}

Question 5

উপাদানগুলিকে object-fitআকার দিতে আপনি সম্পত্তিটি ব্যবহার করতে পারেন img:

coverধারক পূরণ করার জন্য আনুপাতিকভাবে চিত্রটি প্রসারিত বা সঙ্কুচিত করে। চিত্রটি অনুভূমিকভাবে - অনুভূমিকভাবে ক্রপ করা হয় যদি প্রয়োজন হয়।
contain ধারকটির ভিতরে ফিট করার জন্য আনুপাতিকভাবে চিত্রটি প্রসারিত বা সঙ্কুচিত করে।
scale-down ধারকটির ভিতরে ফিট করার জন্য আনুপাতিকভাবে চিত্রটি সঙ্কুচিত করে।

.example {
  margin: 1em 0;
  text-align: center;
}

.example img {
  width: 30vw;
  height: 30vw;
}

.example-cover img {
  object-fit: cover;
}

.example-contain img {
  object-fit: contain;
}

<div class="example example-cover">
  <img src="https://i.stack.imgur.com/B0EAo.png">
  <img src="https://i.stack.imgur.com/iYkNH.png">
  <img src="https://i.stack.imgur.com/gne9N.png">
</div>

<div class="example example-contain">
  <img src="https://i.stack.imgur.com/B0EAo.png">
  <img src="https://i.stack.imgur.com/iYkNH.png">
  <img src="https://i.stack.imgur.com/gne9N.png">
</div>

স্নিপেট প্রসারিত করুন

উপরের উদাহরণে: লাল হ'ল ল্যান্ডস্কেপ, সবুজ প্রতিকৃতি এবং নীল বর্গক্ষেত্রের চিত্র। চেকার প্যাটার্নটি 16x16px স্কোয়ার নিয়ে গঠিত।

Question 6

যারা বুটস্ট্র্যাপ ব্যবহার করেন এবং দায়বদ্ধতা হারাতে চান না তাদের জন্য কেবল ধারকটির প্রস্থ নির্ধারণ করবেন না। নিম্নলিখিত কোডটি গিলিটেক পোস্টের উপর ভিত্তি করে ।

index.hmtl

<div id="image_preview" class="row">  
    <div class='crop col-xs-12 col-sm-6 col-md-6 '>
         <img class="col-xs-12 col-sm-6 col-md-6" 
          id="preview0" src='img/preview_default.jpg'/>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6">
         more stuff
    </div>

</div> <!-- end image preview -->

স্টাইল। CSS

/*images with the same width*/
.crop {
    height: 300px;
    /*width: 400px;*/
    overflow: hidden;
}
.crop img {
    height: auto;
    width: 100%;
}

বা স্টাইল। CSS

/*images with the same height*/
.crop {
    height: 300px;
    /*width: 400px;*/
    overflow: hidden;
}
.crop img {
    height: 100%;
    width: auto;
}

Question 7

আপনি এটি এইভাবে করতে পারেন:

 .container{
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
z-index: 1;
}

img{
left: 50%;
position: absolute;
top: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-width: 100%;
}

Question 8

লোগোগুলির একটি তালিকা তৈরি করার জন্য, আমি এই একই সমস্যার সমাধান চাইছিলাম।

আমি এই সমাধানটি নিয়ে এসেছি যা কিছুটা ফ্লেক্সবক্স ব্যবহার করে, যা আমাদের পক্ষে কাজ করে যেহেতু আমরা পুরানো ব্রাউজারগুলি নিয়ে চিন্তিত নই।

এই উদাহরণটি একটি 100x100px বাক্স ধরেছে তবে আমি নিশ্চিত যে আকারটি নমনীয় / প্রতিক্রিয়াশীল হতে পারে।

.img__container {
    display: flex;
    padding: 15px 12px;
    box-sizing: border-box;
    width: 100px; height: 100px;

    img {
        margin: auto;
        max-width: 100%;
        max-height: 100%;
    }
}

PS: আপনার কিছু উপসর্গ যুক্ত করতে বা অটোপ্রিফিক্সার ব্যবহার করতে পারে।

Question 9

অ্যান্ডি উইলকিনসনের উত্তরের ভিত্তিতে (দ্বিতীয়টি), আমি কিছুটা উন্নতি করেছি, নিশ্চিত হয়েছি যে চিত্রটির কেন্দ্রটি প্রদর্শিত হবে (যেমন স্বীকৃত উত্তরটি করেছে):

এইচটিএমএল:

<div class="crop">
   <img src="img.png">
</div>

সিএসএস:

.crop{
  height: 150px;
  width: 200px;
  overflow: hidden;
}
.crop img{
  width: 100%;
  height: auto;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
  -ms-transform: translateY(-50%); /* IE 9 */
  transform: translateY(-50%); /* IE 10, Fx 16+, Op 12.1+ */
}

Question 10

সিএসএস ফাইলে উচ্চতা এবং প্রস্থের পরামিতিগুলি সেট করুন

.ImageStyle{

    max-height: 17vw;
    min-height: 17vw;
    max-width:17vw;
    min-width: 17vw;
    
}

স্নিপেট প্রসারিত করুন

Question 11

.article-img img{ 
    height: 100%;
    width: 100%;
    position: relative;
    vertical-align: middle;
    border-style: none;
 }

আপনি চিত্রগুলির আকার ডিভের মতোই তৈরি করবেন এবং ডিভ আকারটি মাপসই করতে বুটস্ট্র্যাপ গ্রিড ব্যবহার করতে পারেন

Question 12

চিত্রের আকার ডিভ উচ্চতা এবং প্রস্থের উপর নির্ভর করে না,

CSS এ img উপাদান ব্যবহার করুন

এখানে সিএসএস কোড যা আপনাকে সহায়তা করে

div img{
         width: 100px;
         height:100px;
 }

আপনি ডিভ দ্বারা আকার সেট করতে চান

এটা ব্যবহার কর

div {
    width:100px;
    height:100px;
    overflow:hidden;
}

এই কোড দ্বারা আপনার চিত্রটি মূল আকারে দেখায় তবে প্রথম 100x100px ওভারফ্লো লুকিয়ে ফেলবে show

Question 13

কোড ব্যতীত এটি আপনাকে সহায়তা করা কঠিন তবে এখানে আপনার জন্য কিছু ব্যবহারিক পরামর্শ দেওয়া হয়েছে:

আমি সন্দেহ করি যে আপনার "চিত্র প্রাচীর" এ স্টাইল দেওয়ার জন্য কোনও আইডি বা বর্গ সহ কিছু ধরণের ধারক রয়েছে।

যেমন:

<body>

<div id="maincontainer">
  <div id="header"></div>

  <div id="content">
    <div id="imagewall">
      <img src"img.jpg">
<!-- code continues -->

আপনার কোডটি উপরের মতো সেট আপ করা থাকলে আপনার চিত্রের প্রাচীরের জন্য সমস্ত চিত্রের উপর একটি আকার স্টাইলিং করা, অন্য লোগো যেমন আপনার লোগো ইত্যাদিকে প্রভাবিত করে না easy

#imagewall img {
  width: 100px;
  height: 100px; }

তবে যদি আপনার চিত্রগুলি পুরোপুরি বর্গক্ষেত্র না হয় তবে তারা এই পদ্ধতিটি ব্যবহার করে স্কিউ হবে।

Question 14

আপনার সিএসএস ফাইলে যান এবং নীচে আপনার সমস্ত চিত্রের আকার পরিবর্তন করুন

img {
  width:  100px;
  height: 100px;
}