অভিভাবক ডিভের 100% চিত্রের প্রস্থ তৈরি করুন তবে এর নিজস্ব প্রস্থের চেয়ে বড় নয়

Question

আমি চেষ্টা করছি যে কোনও চিত্র (গতিশীলভাবে স্থাপন করা হয়েছে, মাত্রার কোনও সীমাবদ্ধতা ছাড়াই) এর পিতামাতার দ্বিখণ্ডের মতো প্রশস্ত হতে হবে তবে যতক্ষণ না প্রস্থটি এর নিজস্ব প্রস্থের চেয়ে 100% প্রশস্ত নয়। আমি চেষ্টা করেছি, কোন লাভ হয়নি:

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

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

Comments

আপনি কেবল উল্লেখ করলে কী হয় max-width: 100%?

— ফায়োডর সোইকিন

@ ফায়ডর সোইকিন - উত্তর হিসাবে এটি দিন এবং আমি আপনাকে ভোট দেব।

— গার্ট গ্রেনান্ডার

তবে কোন ব্রাউজারগুলি সর্বোচ্চ-প্রস্থকে সমর্থন করে তা বিবেচনা করা ভাল।

— kbrimington

কেব্রিমিংটন টেবিলে একটি ভাল পয়েন্ট আনবে। মতে reference.sitepoint.com/css/max-width#compatibilitysection IE8 বাস্তবায়ন ত্রুটি মুক্ত নয়।

— আলফোনসো

Answer 1

শুধু max-width: 100%একা নির্দিষ্ট করুন , এটি করা উচিত।

Comments

ক্রোমিয়াম প্রসঙ্গ নির্বিশেষে এটিকে 100% এ ছেড়ে যায় বলে মনে হচ্ছে। সম্ভবত আমার বিটা সফ্টওয়্যারটিতে আমার কাজটির দিকে নজর দেওয়া উচিত। ধন্যবাদ!

— আলফোনসো

আপনি সর্বোচ্চ-প্রস্থ: 100% ব্যবহার না করে কীভাবে এটি করেন। প্রতিক্রিয়া-নেটিভ এ, শতাংশ ব্যবহার করা সম্ভব নয়।

— ক্রোলসবি

@ ক্রলসবি দ্বারা আপনি শতাংশ ব্যবহার করতে পারবেন দেশ-বিদেশী প্রতিক্রিয়া, তবে স্ট্রিং মান সহ, এই '100%'

— রাফায়েল হোভেস্পিয়ান

Answer 2

গুগল অনুসন্ধানে এই পোস্টটি পাওয়া গেছে এবং এটি @ জাওয়াল জবাবের জন্য আমার সমস্যাটি সমাধান করেছে, তবে আমি তার সমাধানে আরও একটি সংযোজন করেছি।

img.content.x700 {
  width: auto !important; /*override the width below*/
  width: 100%;
  max-width: 678px;
  float: left;
  clear: both;
}

উপরের সাহায্যে আমি আমার চিত্রটিতে থাকা সামগ্রীর ধারকটির মাত্রাগুলিতে সর্বোচ্চ-প্রস্থকে পরিবর্তন করেছি this এক্ষেত্রে এটি হ'ল: ধারক প্রস্থ - প্যাডিং - বোর্ডার = সর্বোচ্চ প্রস্থ

এইভাবে আমার চিত্রটি অন্তর্ভুক্ত ডিভের বাইরে ভাঙ্গবে না এবং আমি ছবিটি তখনও সামগ্রী ডিভের মধ্যে ভাসতে পারি।

আমি IE 9, ফায়ারফক্স 18.0.2 এবং ক্রোম 25.0.1364.97, সাফারি আইওএস এ পরীক্ষা করেছি এবং মনে হচ্ছে এটি কাজ করে।

অতিরিক্ত: আমি এটি 678px (সর্বাধিক প্রস্থ) প্রদর্শিত 1024px প্রশস্ত চিত্র এবং 500px প্রশস্ত চিত্র (চিত্রের প্রস্থ) এ পরীক্ষা করেছি on

Comments

ব্যবহার করা width:auto !important;আমার জন্য IE11 একটি সমস্যা সমাধান করা হয়েছে যেখানে ইমেজ তার ধারক এবং IE11 চিত্রটি মাপে ছোট না চেয়ে বড় হবে। নির্বাচনকারীকে এটি সেট imgকরে আইই 11 এ সমস্যাটি সাজানো হয়েছে। তবে width:100%;অন্য নিয়ম ছাড়া সেটিং আইই 11 তে কিছুই করেনি। সুতরাং চিত্রটিকে তার ধারকের আকার পর্যন্ত স্কেল করার জন্য "ওভাররাইড" অন্তর্ভুক্ত করতে হবে।

— lowtechsun

Answer 3

১০০% প্রস্থ নির্ধারণ করা হল এটির ডিভের সম্পূর্ণ প্রস্থ, মূল পূর্ণ আকারের চিত্র নয়। জাভাস্ক্রিপ্ট বা অন্য কোনও স্ক্রিপ্টিং ভাষা না করে এটি করার কোনও উপায় নেই যা চিত্রটি পরিমাপ করতে পারে। আপনার যদি ডিভের একটি নির্দিষ্ট প্রস্থ বা স্থির উচ্চতা থাকতে পারে (200px প্রস্থের মতো) তবে চিত্রটি পূরণের জন্য কোনও পরিসর দেওয়া খুব কঠিন হবে না । তবে আপনি যদি 200x300 পিক্সেল বাক্সে 20x20 পিক্সেল চিত্র রাখেন তবে এটি বিকৃত হবে।

Comments

যখনই সম্ভব একটি কাজের উদাহরণ সরবরাহ করুন। এটি সুপারিশ করা হয়। :)

— bhb

Answer 4

লাইনের শৈলীতে - এটি প্রতিবার আমার জন্য কাজ করে

<div class="imgWrapper">
    <img src="/theImg.jpg" style="max-width: 100%">
</div>

Answer 5

আপনার সর্বোচ্চ প্রস্থ নির্ধারণ করা উচিত এবং আপনি যদি চান তবে আপনি পাশের যে কোনও একটিতে কিছু প্যাডিংও সেট করতে পারেন। আমার ক্ষেত্রে সর্বাধিক প্রস্থ: 100% ভাল ছিল তবে চিত্রটি পর্দার শেষের ঠিক পাশেই ছিল।

  max-width: 100%;
  padding-right: 30px;
  /*add more paddings if needed*/

Answer 6

আমারও একই সমস্যা ছিল, তবে আমি নিজের সিএসএসে স্বয়ংক্রিয়তার জন্য উচ্চতার মান সেট করেছিলাম এবং এটি আমার সমস্যাটিকে স্থির করে। এছাড়াও, প্রদর্শন সম্পত্তি করতে ভুলবেন না।

  #image {
      height: auto;
      width: auto;
      max-height: 550px;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      display: block;
 }  

Comments

কেবলমাত্র একটি ফায়ি..আপনি উচ্চতা: অটো এবং প্রস্থ: স্বয়ংক্রিয়তা সরাতে পারেন। সর্বাধিক উচ্চতা এবং সর্বাধিক প্রস্থ একই জিনিস।

— ডেবি কুর্থ

Answer 7

আমি একটি উত্তর পেয়েছি যা আমার পক্ষে কাজ করেছে এবং নিম্নলিখিত লিঙ্কে পাওয়া যাবে:

সীমিত প্রস্থ পিতা-মাতার সম্পূর্ণ প্রস্থের ধারক

Answer 8

চিত্রটি পিতামাতার চেয়ে ছোট হলে ...

.img_100 {
  width: 100%;
}

Answer 9

আমি সম্পত্তি ব্যবহার করতে হবে display: table-cell

লিঙ্কটি এখানে