আমি কীভাবে একটি ডিভের মধ্যে একটি চিত্র (img) ফিট করব এবং অনুপাতের অনুপাতটি রাখব?

Question

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

Answer 1

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

এইচটিএমএল এবং জাভাস্ক্রিপ্ট

<div id="container">
    <img src="something.jpg" alt="" />
</div>

<script type="text/javascript">
(function() {

var img = document.getElementById('container').firstChild;
img.onload = function() {
    if(img.height > img.width) {
        img.height = '100%';
        img.width = 'auto';
    }
};

}());
</script>

সিএসএস

#container {
   width: 48px;
   height: 48px;
}

#container img {
   width: 100%;
}

আপনি যদি জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করেন তবে আপনি এটির সুবিধা নিতে চাইতে পারেন।

Comments

মাইকেল এর উত্তর অনেক সহজ এবং এটি জাভাস্ক্রিপ্ট ব্যবহার করে না। যদিও আমি ব্রাউজারের সামঞ্জস্যতা সম্পর্কে জানি না।

— weberc2

না, মাইকের উত্তর ততক্ষণ কাজ করবে যতক্ষণ না ছবিটি ডিভের চেয়ে বড়। আপনি যদি চিত্রটি চিত্রের আকার সম্পর্কিত ডিভিটি পূরণ করতে চান (এবং আপনি যদি চিত্রের আকার আগেই জানেন না, তবে আপনিই করেন), এই উপায়টি।

— র‌্যামি ডেভিড

আপনি সর্বোচ্চ-উচ্চতা ব্যবহার করতে পারবেন না: 100%; সর্বোচ্চ প্রস্থ: 100%; মিনিট-প্রস্থের: 100%; ন্যূনতম উচ্চতা: 100% এবং তারপর একই ফলাফল পাবেন? সৎ প্রশ্ন।

— ড্যানিয়েল ক্যাসারেলি

না, এটি করে আপনি প্রস্থ এবং উচ্চতা 100% হতে বাধ্য করেছেন, সুতরাং আপনি চিত্রের অনুপাতটি পরিবর্তন করুন।

— gztomas

চিত্রটি ব্রাউজারে ক্যাশে করা হলে অনলোড বলা হবে না, সুতরাং চিত্রটি প্রথমবার লোড হওয়ার পরে এটি কেবলমাত্র কাজ করবে ed

— রেডটোপিয়া

Answer 2

max-height:100%; max-width:100%;ডিভের ভিতরে চিত্রটির জন্য ব্যবহার করুন ।

Comments

@ জোভগেমস নন-জেএস সক্ষম ব্রাউজারগুলি? ২০১০ সালের ইয়াহু পরিসংখ্যান গড়ে 1.3% দেখায়। আমি মনে করি এটি নিরাপদ যে একটি। এটি সম্ভবত আজ কম এবং খ। প্রোগ্রামার.সটাকেক্সচেঞ্জ / প্রশ্ন

— 26179/…

এটি আমার পক্ষে কাজ করে না ... এটি চিত্রটিকে নিজস্ব আকারের 100% করে তোলে (উদাহরণস্বরূপ: একটি চিত্রের জন্য 300px প্রশস্ত যা আসলে 300px প্রশস্ত)।

— টোমা জ্যাটো - মনিকা পুনরায় ইনস্টল করুন

উইন্ডোজের নির্দিষ্ট কিছু বাগ রয়েছে যা এর কারণ হিসাবে ঘটে this আমার কাছে থাকা স্মুডস্ক্রোল প্লাগইনগুলির সাথে সম্ভবত কিছু খারাপ মিথস্ক্রিয়া। এটি overflow:scrollএকটি বৃহত চিত্র সহ মাউস একটি ডিভের উপরে থাকলেও এটি শরীরটি স্ক্রোল করার চেষ্টা করে trying অদ্ভুত। আরও অদ্ভুত: ম্যাক্সের সমাধানটি এটিকে ঠিক করে দেয়। আমি সত্যিই সিএসএসে বেশ বিরক্ত হয়েছি। শক্তিশালী এবং শীতল হতে ব্যবহৃত। এখন বাস্তবায়নগুলি বাগি অসামঞ্জস্যতার পরে কেবল বগির অসঙ্গতি তৈরি করে।

— স্টিভেন লু

শুধুমাত্র একটি চিত্র স্কেলিংয়ের সময় কাজ করে। আপনি যদি কোনও বড় পাত্রে একটি ছোট চিত্র ফিট করতে চান তবে এটি কাজ করবে না

— ইয়োশি শাশো

এটি চিত্রের মূল অনুপাতটি সংরক্ষণ করে না।

— 10sααc t ի βöss

Answer 3

দুর্ভাগ্যক্রমে সর্বোচ্চ-প্রস্থ + সর্বাধিক উচ্চতা আমার কাজটি পুরোপুরি কভার করে না ... সুতরাং আমি আরও একটি সমাধান পেয়েছি:

স্কেল করার সময় চিত্র অনুপাত সংরক্ষণ করতে আপনি object-fitCSS3 প্রপার্টি ব্যবহার করতে পারেন ।

দরকারী নিবন্ধ: CSS3 সহ চিত্রের অনুপাত নিয়ন্ত্রণ করুন

img {
    width: 100%; /* or any custom size */
    height: 100%; 
    object-fit: contain;
}

খারাপ খবর: IE সমর্থিত নয় ( আমি কি ব্যবহার করতে পারি )

Comments

এটি অবশ্যই উত্তর হিসাবে চিহ্নিত করতে হবে .. "অবজেক্ট-ফিট" পুরোপুরি কাজ করেছে worked

— 15sααc t ի εss

অদ্ভুতভাবে, দেখে মনে হচ্ছে এটির জন্য সমর্থনটি 8.0 নয়, আইওএস 8.1 এ চালু হয়েছিল।

— রে

object-fit: cover; আমার জন্য কাজ। এখানে: stackoverflow.com/questions/9071830/…

— Deke

আপনি যদি চিত্রটি কেন্দ্রিক না হয়ে উপরের বামে থাকতে চান তবে আপনাকে অবজেক্ট-অবস্থান 0 0 ব্যবহার করতে হবে

— ক্রিস

এই একমাত্র উত্তর যা আমার পক্ষে প্রতিক্রিয়াশীল চিত্রের পটভূমি তৈরি করতে কাজ করেছিল যা চিত্রের অনুপাতটি বজায় রেখে স্ক্রিনটি পূর্ণ করে।

— রায় লি

Answer 4

কেবল সিএসএস ব্যবহার:

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

Comments

স্কেল আপ করতে পারে না

— জেএফএফআইজিপি

Answer 5

এইচটিএমএল

<div>
    <img src="something.jpg" alt="" />
</div>

সিএসএস

div {
   width: 48px;
   height: 48px;
}

div img {
   display: block;
   width: 100%;
}

এটি চিত্রটিকে তার পিতামাতাকে পূরণ করতে প্রসারিত করবে, যার মধ্যে এর আকারটি divসিএসএসে সেট করা আছে ।

Comments

যুক্ত করবেন না height: 100%, এটি চিত্রের অনুপাতকে স্কু করবে - ওপি অনুপাত বজায় রাখতে চায়।

— ক্যাসাব্ল্যাঙ্কা

আমি নিশ্চিত না যে ওপি বলতে কী বোঝায় কিন্তু সেখানে আপনি অনুপাতটি ঠিক রাখছেন না?

— ট্রুফা

অনুপাত রাখতে আমি কী করতে পারি? যদি আমি উচ্চতা মুছি: 100% চিত্রটি ক্রপ করা হবে।

— বিন চেন

Answer 6

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

আমি বুঝতে পারি যে আমাকে ডিভ ডিসপ্লেটি ফ্লেক্সে সেট করতে হয়েছে, সুতরাং মূলত এটি আমার সিএসএস:

div{
display: flex;
}

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

Comments

আমার চিত্রগুলি ক্রোম সংস্করণ

— ইয়েভেগেনি আফানসিয়েভ

হতে পারে আপনার ডিভের সর্বাধিক উচ্চতা / উচ্চতা বা প্রস্থের সেট রয়েছে এবং এটি আপনার চিত্রের বিকৃতি ঘটায়।

— বার্থো বার্নসম্যান

ঠিক আমার বক্তব্য .. চিত্রটি বিকৃত হয়েছে কারণ আপনি আপনার <

— ডি

আপনার উদাহরণের জন্য .. আমি বিশ্বাস করি আপনি নিজের ছবিতে এমন কিছু খুঁজছেন CSS: উচ্চতা: অটো; প্রস্থ: 100%;

— বার্থো বার্নসম্যান

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

— ইয়েভেগেনি আফানসিয়েভ

Answer 7

সিএসএস চেষ্টা করুন:

img {
  object-fit: cover;
  height: 48px;
}

Answer 8

আমার জন্য, নিম্নলিখিত সিএসএস কাজ করেছে (ক্রোম, ফায়ারফক্স এবং সাফারিতে পরীক্ষিত)।

এক সাথে কাজ করার একাধিক জিনিস রয়েছে:

• max-height: 100%;, max-width: 100%;এবং height: auto;, width: auto;অনুপাতের অনুপাত বজায় রেখে ইমগ স্কেলটি যে কোনও মাত্রা প্রথমে 100% এ পৌঁছায় তা তৈরি করুন
• position: relative;পাত্রে এবং position: absolute;সন্তানের সাথে একত্রে top: 50%;এবং left: 50%;ধারকটিতে ইমগের উপরের বাম কোণটি কেন্দ্র করে
• transform: translate(-50%, -50%); আইএমজিটি তার আকারের অর্ধেক দ্বারা বাম এবং শীর্ষে ফিরে যায়, এভাবে ধারকটিতে ইমগিকে কেন্দ্র করে

সিএসএস:

.container {
    height: 48px;
    width: 48px;

    position: relative;
}

.container > img {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;

    position: absolute;
    top: 50%;
    left: 50%;

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

Answer 9

ফটোটিকে ব্যাকগ্রাউন্ড ইমেজ হিসাবে সেট করা আমাদের আকার এবং স্থানের উপর আরও নিয়ন্ত্রণ প্রদান করবে, আইএমজি ট্যাগ রেখে অন্য উদ্দেশ্যে উপস্থাপন করবে ...

নীচে, আমরা যদি ডিভটি ছবির মতো একই অনুপাতের অনুপাত হিসাবে দেখতে চাই তবে স্থানধারক.পিএনজি একটি ছোট স্বচ্ছ চিত্র যা ফটো.জেপিজির মতো একই দিক অনুপাত সহ with যদি ছবিটি একটি বর্গক্ষেত্র হয় তবে এটি 1px x 1px স্থানধারক, যদি ফটোটি কোনও ভিডিও থাম্বনেইল হয় তবে এটি একটি 16x9 স্থানধারক ইত্যাদি

প্রশ্নের সাথে সুনির্দিষ্ট, ডিভ এর বর্গ অনুপাত বজায় রাখতে 1x1 স্থানধারক ব্যবহার background-sizeকরুন, ছবির ব্যপারের অনুপাত বজায় রাখার জন্য একটি ব্যাকগ্রাউন্ড চিত্র ব্যবহার করুন ।

আমি background-position: center center;ছবিটি ডিভকে কেন্দ্র করেই ব্যবহার করেছি। (উল্লম্ব কেন্দ্রে বা নীচে ছবি সারিবদ্ধ করা ইমগ ট্যাগে ছবির সাথে কুশ্রী হয়ে উঠবে))

div {
    background: url(photo.jpg) center center no-repeat;
    background-size: contain;
    width: 48px; // or a % in responsive layout
}
img {
    width: 100%;
}

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

অতিরিক্ত http অনুরোধ এড়াতে, স্থানধারক চিত্রটি একটি ডেটাতে রূপান্তর করুন: ইউআরএল ।

<img src="data:image/png;base64,..."/>

Answer 10

আপনি নতুন সংস্করণ অর্থাৎ বুটস্ট্র্যাপ ভি 4 এর জন্য ক্লাস "ইম্জি-ফ্লুয়েড" ব্যবহার করতে পারেন ।

এবং বুটস্ট্র্যাপ ভি 3 এর মতো পুরানো সংস্করণের জন্য "img-প্রতিক্রিয়াশীল" ক্লাস ব্যবহার করতে পারেন ।

ব্যবহার : -

আইএমজি ট্যাগ এর সাথে: -

শ্রেণি = "আইএমজি-তরল"

src = "..."

Answer 11

এখানে একটি সমস্ত জাভাস্ক্রিপ্ট পদ্ধতির। এটি কোনও চিত্র সঠিকভাবে ফিট না হওয়া পর্যন্ত ক্রমান্বয়ে নীচে স্কেল করে। প্রতিবার ব্যর্থ হওয়ার সাথে সাথে এটি সঙ্কুচিত করার জন্য আপনি বেছে নিন। এই উদাহরণটি প্রতিবার এটি ব্যর্থ হওয়ার সাথে সাথে 10% সঙ্কুচিত করে:

let fit = function (el, w, h, percentage, step)
{
    let newH = h;
    let newW = w;

    // fail safe
    if (percentage < 0 || step < 0) return { h: h, w: w };
    if (h > w)
    {
        newH = el.height() * percentage;
        newW = (w / h) * newH;
        if (newW > el.width())
        {
            return fit(el, w, h, percentage - step, step);
        }
    }
    else
    {
        newW = el.width() * percentage;
        newH = (h / w) * newW;
        if (newH > el.height())
        {
            return fit(el, w, h, percentage - step, step);
        }
    }

    return { h: newH, w: newW };
};

img.bind('load', function ()
{
    let h = img.height();
    let w = img.width();
    let newFit = fit($('<img-wrapper-selector>'), w, h, 1, 0.1);

    img.width(newFit.w);
    img.height(newFit.h);
});

সরাসরি অনুলিপি এবং পেস্ট করুন।

Answer 12

আমার জন্য যা কাজ করেছিল তা হ'ল:

<div style='display: inline-flex; width: 80px; height: 80px;'>
<img style='max-width: 100%; max-height: 100%' src='image file'>
</div>

চিত্রগুলি ডিভের বাইরে যেতে না দেওয়ার জন্য ইনলাইন-ফ্লেক্স প্রয়োজন।