ব্রাউজারের প্রস্থ / উচ্চতা পরিবর্তন হিসাবে আমি কীভাবে কোনও চিত্রকে গতিশীলভাবে আকার দিতে পারি?

Question

আমি ভাবছি কীভাবে আমি ব্রাউজার উইন্ডোটির সাথে একটি চিত্রের আকার পরিবর্তন করতে পারি, আমি এখন পর্যন্ত যা করেছি তা এখানে রয়েছে (বা একটি জিপতে পুরো সাইটটি ডাউনলোড করুন )।

এটি ফায়ারফক্সে ঠিক আছে, তবে ক্রোমে এটির সমস্যা রয়েছে: চিত্রটি সর্বদা আকার পরিবর্তন করে না, পৃষ্ঠাটি লোড হওয়ার পরে এটি কোনওভাবে উইন্ডোর আকারের উপর নির্ভর করে।

এটি সাফারিতেও ঠিক কাজ করে তবে কখনও কখনও চিত্রটি তার সর্বনিম্ন প্রস্থ / উচ্চতা সহ লোড হয়। এটি চিত্রের আকারের কারণে ঘটেছে, আমি নিশ্চিত নই। (যদি এটি ঠিক হয়ে যায় তবে বাগটি দেখার জন্য কয়েকবার রিফ্রেশ করার চেষ্টা করুন))

আমি কীভাবে এটিকে আরও বুলেটপ্রুফ করতে পারি তার কোনও ধারণা? (জাভাস্ক্রিপ্টের প্রয়োজন হলে আমি এটির সাথেও বেঁচে থাকতে পারি, তবে সিএসএস পছন্দনীয়)

Comments

CSS3 মিডিয়া ক্যোয়ারী বা জাভাস্ক্রিপ্টের উইন্ডো ব্যবহার করুন event ইভেন্ট হ্যান্ডলারটি অনারাইজ করুন। w3schools.com/jsref/event_onresize.asp

— শহীদ

আপনি যদি বুটস্ট্র্যাপ ব্যবহার করছেন তবে এই শ্রেণিটির মতো একটি শ্রেণি যুক্ত করুন = "img-thumbnail"। এটি সব।

— বিবেকদেভ

Answer 1

এটি খাঁটি সিএসএস দিয়ে করা যেতে পারে এবং এমনকি মিডিয়া প্রশ্নেরও প্রয়োজন হয় না।

চিত্রগুলি নমনীয় করতে, কেবল যুক্ত করুন max-width:100%এবং height:auto। চিত্র max-width:100%এবং height:autoআই 7 এ কাজ করে তবে আই 8 তে নয় (হ্যাঁ, অন্য একটি বিচিত্র আইই বাগ)। এটি ঠিক করার জন্য, আপনাকে width:auto\9আইই 8 এর জন্য যুক্ত করতে হবে ।

উৎস: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

সিএসএস:

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

এবং যদি আপনি চিত্রটির একটি নির্দিষ্ট সর্বোচ্চ প্রস্থ চাপিয়ে দিতে চান তবে এটি কেবল একটি পাত্রে রাখুন, উদাহরণস্বরূপ:

<div style="max-width:500px;">
    <img src="..." />
</div>

জেএসফিডালের উদাহরণ এখানে । কোন জাভাস্ক্রিপ্ট প্রয়োজন। ক্রোম, ফায়ারফক্স এবং আইই এর সর্বশেষ সংস্করণে কাজ করে (যা আমি পরীক্ষিত করেছি)।

Comments

আমি অপেরা 11 এবং সাম্প্রতিক কিছু ফায়ারফক্স উভয়ের সাথে জেসফিডাল লিঙ্কটি পরীক্ষা করেছিলাম এবং উইন্ডোটি সঙ্কুচিত হওয়ার সাথে সাথে এটি চিত্রটি খুব সুন্দরভাবে প্রতিস্থাপন করে, উইন্ডো 650px ছাড়িয়ে যখন এটি ব্যর্থ হয়

— জিডিআর

@ জিডিআর আমি চাইব না যে চিত্রটি এর স্থানীয় আকারের চেয়ে বেশি হয়ে উঠুক, এটি কেবল পিক্সেলেট এবং কুরুচিপূর্ণ দেখাবে। আপনার যদি আরও বড় করার প্রয়োজন হয় তবে আমি কেবল একটি বড় চিত্র দিয়ে শুরু করব।

— কার্ট শিন্ডলার

ঠিক আছে, তাহলে আমি ভুল করে ধরে নিয়েছি যে এটি এই প্রশ্নের মূল বিষয়, দুঃখিত।

— জিডিআর

সর্বোচ্চ-প্রস্থ 100% এবং অটোতে উচ্চতা নির্ধারণ করা আমার পক্ষে কিছুই করেনি - আমি প্রকৃতপক্ষে একটি ধারক নিয়ে কাজ করেছি। চিত্রটি একটি ডিভের মধ্যে আবদ্ধ করুন, সর্বাধিক উচ্চতা / প্রস্থ নির্ধারণ করুন এবং চিত্রটিকে (# ডাইভ ইমজি {}) প্রস্থটি 100% এবং উচ্চতা 100% হতে দিন।

— মাভ 19

এই জাদু কি ধরনের?! এটা সত্যিই দারুন!

— লিওনার্দো ওয়াইল্ড

Answer 2

2018 এবং পরবর্তী সমাধান:

ভিউপোর্ট-রিলেটিভ ইউনিটগুলি ব্যবহার করা আপনার জীবনযাত্রাকে আরও সহজ করে তুলবে, আমাদের বিড়ালের চিত্র দেওয়া থাকলে:

এখন আমরা এই বিড়ালটি আমাদের কোডের অভ্যন্তরে চাই, অনুপাতের অনুপাতকে সম্মান জানিয়ে:

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

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

এখনও অবধি সত্যিই আকর্ষণীয় নয়, তবে আমরা কি যদি বিড়ালগুলির প্রস্থকে ভিউপোর্টের সর্বোচ্চ 50% হতে চাই?

img {
  width: 100%;
  height: auto;
  /* Magic! */
  max-width: 50vw;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

একই চিত্র, তবে এখন 50vw vw (= ভিউপোর্টের প্রস্থ) সর্বাধিক প্রস্থের মধ্যে সীমাবদ্ধ মানে চিত্রটি প্রদত্ত অঙ্কের উপর নির্ভর করে ভিউপোর্টের এক্স প্রস্থ হবে। এটি উচ্চতার জন্যও কাজ করে:

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

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

এটি ভিউপোর্টের সর্বোচ্চ 20% পর্যন্ত চিত্রের উচ্চতা সীমাবদ্ধ করে।

Comments

ধন্যবাদ! যখন আমার কাছে বিভিন্ন আকারের ইমেজ থাকে আমি কীভাবে vh এবং vw নির্ধারণ করব?

— হারমান টুথ্রোট

হাই @ হারম্যানথুথ্রোট, আপনি কি ভিউপোর্ট ইউনিট ব্যবহার করার সময় দিক অনুপাত রাখতে চান?

— রবার্ট-এস

@ রবার্ট বলেছেন যে আমার কাছে বিভিন্ন আকারের এবং একটি ইনলাইন-ব্লকের কয়েকটি চিত্র রয়েছে এবং এগুলির সমস্ত দিকের অনুপাত রাখতে চাই তবে সেগুলি একই উচ্চতা বা প্রস্থে সেট করতে চাই।

— হারমান টুথ্রোট

হয় প্রস্থ করুন: 100% এবং সর্বাধিক উচ্চতা: 50vh বা বিপরীত

— রবার্ট-এস

@ রবার্ট প্রস্থ: ১০০% এর বেশি প্রভাব ফেলবে বলে মনে হয় না। আমাকে কেবল vh অনুমান করতে হবে, আমার ক্ষেত্রে 50 অনেক বেশি এবং 40 সমস্ত চিত্রের উচ্চতা সর্বাধিক করে তোলে।

— হারমান টুথ্রোট

Answer 3

window.onresize = function(){
    var img = document.getElementById('fullsize');
    img.style.width = "100%";
};

আইই onresizeইভেন্টে প্রতিটি পিক্সেল পরিবর্তন (প্রস্থ বা উচ্চতা) এড়িয়ে যায় যাতে পারফরম্যান্সের সমস্যা হতে পারে। জাভাস্ক্রিপ্টের উইন্ডো.সেটটাইমআউট () ব্যবহার করে কয়েক মিলি সেকেন্ডের জন্য ইমেজটির আকার পরিবর্তন করুন।

http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html

Answer 4

উভয়কেই পুনরায় আকারের সম্পত্তি সেট করুন। তারপরে আপনি এর মতো প্রস্থ এবং উচ্চতা পরিবর্তন করতে পারেন:

.classname img{
  resize: both;
  width:50px;
  height:25px;
}

Answer 5

আপনি কি jQuery ব্যবহার করছেন?

যেহেতু আমি jQuery প্লাগিংগুলিতে দ্রুত অনুসন্ধান করেছি এবং তাদের এটি করার জন্য কিছু প্লাগইন রয়েছে বলে মনে হচ্ছে, এটি পরীক্ষা করে দেখুন, কাজ করা উচিত:

http://plugins.jquery.com/project/jquery-afterresize

সম্পাদনা করুন:

এটি সিএসএস সমাধান, আমি কেবল একটি শৈলী = "প্রস্থ: 100%" যুক্ত করি এবং কমপক্ষে ক্রোম এবং সাফারিতে আমার জন্য কাজ করি। আমার যেমন নেই, তাই কেবল সেখানে পরীক্ষা করুন, এবং আমাকে জানান, কোডটি এখানে:

            <div id="gallery" style="width: 100%">
                <img src="images/fullsize.jpg" alt="" id="fullsize" />
                <a href="#" id="prev">prev</a>
                <a href="#" id="next">next</a>
            </div>

Comments

এমন সাধারণ সমস্যার জন্য jQuery অপ্রয়োজনীয়। জেএসের কয়েকটি লাইনে 50 কেবি + (পুরো গ্রন্থাগার) লোড করা কেন উপকারী হবে?

নিশ্চিত, আপনি পুরোপুরি ঠিক বলেছেন, আমি s why Iতাকে জিজ্ঞাসা করছি, তিনি যদি jQuery ব্যবহার করছেন, কারণ তিনি যদি একটি ভাল ধারণা হতে পারেন তবে কেবল প্লাগইন যুক্ত করুন!

— আর্থার

তাহলে জেএস ছাড়া এটা কি সম্ভব নয়? আমি এই এক সহজ সমাধান পাওয়া unstoppablerobotninja.com/search/... তবে আমি পুরোপুরি সফলভাবে আমার টেমপ্লেটে তা বাস্তবায়ন করতে সক্ষম হয়নি

— depi

Answer 6

প্রথমদিকে, আমি নিম্নলিখিত এইচটিএমএল / সিএসএস ব্যবহার করছিলাম:

img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}

<div> 
  <img src="..." />
</div>

তারপরে আমি class="img"এর <div> মতো যুক্ত করেছি :

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

এবং সবকিছু ঠিকঠাক কাজ শুরু।

Answer 7

scaleসিএসএসের সাহায্যে চিত্রের আকার পরিবর্তন করতে আপনি CSS3 সম্পত্তি ব্যবহার করতে পারেন :

.image:hover {
  -webkit-transform:scale(1.2); 
          transform:scale(1.2);
}
.image {
  -webkit-transition: all 0.7s ease; 
          transition: all 0.7s ease;
}

আরও পড়া :

• CSS3 2D রূপান্তর
• CSS3 হভার ইফেক্ট ট্রানজিশন, ট্রান্সফর্মেশনস, অ্যানিমেশন

Answer 8

শুধু এই কোড ব্যবহার করুন। সর্বাধিক যা ভুলে যাচ্ছেন তা হ'ল চিত্রের সর্বাধিক প্রস্থ হিসাবে সর্বাধিক প্রস্থকে নির্দিষ্ট করা

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

এই প্রদর্শনীটি দেখুন http://shorturl.at/nBKVY

Answer 9

চেষ্টা

.img{
   width:100vw; /* Matches to the Viewport Width */
   height:auto;
   max-width:100% !important;
}

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