আমি কীভাবে কোনও 'ডিভ' পাত্রে ফিট করতে একটি চিত্রটিকে স্বয়ংক্রিয় আকার দেব?

1509

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

উদাহরণ: স্ট্যাকওভারফ্লো ডটকম - যখন কোনও চিত্র সম্পাদক প্যানেলে inোকানো হয় এবং পৃষ্ঠায় ফিট করার জন্য চিত্রটি খুব বড় হয়, তখন চিত্রটি স্বয়ংক্রিয়ভাবে পুনরায় আকার দেওয়া হয়।

html  css  image  autoresize 
— ২001
সূত্র
কনটেইনারটি ফিট করার জন্য চিত্রের আকার পরিবর্তন করার জন্য কয়েকটি আকর্ষণীয় লাইব্রেরি: * প্লাগইনস.জকোরি / প্রজেক্ট
— ফ্রস্টি জেড
@ কেভিনের উত্তর বাদে ... অন-চাহিদা অনুযায়ী আপনি নিজের ইমেজগুলি তৈরি করতে ইমেজবসের মতো পরিষেবাগুলিও ব্যবহার করতে পারেন। পাত্রে চিত্রটি ফিটিং করা দুর্দান্ত তবে প্রতিক্রিয়া হিসাবে চিত্রগুলি পরিবেশন করা উপায় way
— ইগর এসকোবার
পক্ষে সম্ভব ডুপ্লিকেট: stackoverflow.com/questions/1891857/...
— jolumg
@ জোলমগ যথেষ্ট নয়; কিছু সমাধানগুলিতে প্রচুর ওভারল্যাপ থাকা অবস্থায়, এমন অনেকগুলি সমাধান রয়েছে যা বিনিময়যোগ্য নয়, কারণ এটি কোনও চিত্রকে কীভাবে স্কেল করতে হবে তা জিজ্ঞাসা করছে, যখন এইটি একটি চিত্রকে নীচে স্কেল করতে বলছে।
— টাইলারএইচ
1
001 - এটি জিজ্ঞাসা করা আপনার প্রশ্নের উত্তর যা আমি তা দেখার আগেই বন্ধ করে দেওয়া হয়েছিল। পিতামাত উপাদান থেকে কোনও শিশু উপাদানকে কীভাবে কল করা যায়। ইন্টারফেস ব্যবহার করে কীভাবে উপাদানগুলি যোগাযোগ করতে হয় সে সম্পর্কে আমি একটি ব্লগ পোস্ট লিখেছিলাম: ডাটাজুগ্লারব্লাজর.ব্লগস্পট.com
— ডেটা

উত্তর:

1873

চিত্র ট্যাগটিতে স্পষ্ট প্রস্থ বা উচ্চতা প্রয়োগ করবেন না। পরিবর্তে, এটি দিন:

max-width:100%;
max-height:100%;

এছাড়াও, height: auto;যদি আপনি কেবল একটি প্রস্থ নির্দিষ্ট করতে চান।

উদাহরণ: http://jsfiddle.net/xwrvxser/1/

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

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}
Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
স্নিপেট প্রসারিত করুন

— কেভিন
সূত্র
40
এটি উচ্চতা এবং প্রস্থ উভয়ই স্কেল করবে না।
— নিল
75
উচ্চতা: অটো; যদি আপনি কেবল একটি প্রস্থ নির্দিষ্ট করতে চান
— রুই
82
ছবিটি খুব ছোট হলে কী হবে?
— স্কট রিপ্পি
18
@ স্কট রিপ্পি - চিত্রটি যদি ধারকটির চেয়ে ছোট হয় তবে এটি পরিবর্তন হবে না কারণ ব্যবহৃত নিয়মগুলি সর্বোচ্চ-প্রস্থ এবং সর্বোচ্চ-উচ্চতা।
— পরাবাস্তব স্বপ্নগুলি
15
একটি এনকোলেজিং <a>ট্যাগ সহ, চিত্রটির আকার পরিবর্তন হয়নি। এ-ট্যাগটিতে নিয়ম প্রয়োগ করা এই সমস্যার সমাধান করে।
— এসপিআরবিএনএন
432

অবজেক্ট হইয়া

এটি করার আরও একটি উপায় আছে তা দেখা যাচ্ছে।

<img style='height: 100%; width: 100%; object-fit: contain'/>

কাজ করবে এটি CSS 3 স্টাফ।

ফিডল: http://jsfiddle.net/mbHB4/7364/

— শিহ-মিন লি
সূত্র
39
এটি ধারকটির মধ্যে বৃহত্তর মাত্রাকে পুরোপুরি ফিট করার জন্য চিত্রটি স্কেল করবে, যাতে ছোট মাত্রা এটি পুরোপুরি notেকে না ফেলে। পরিবর্তে বৃহত্তর মাত্রা ক্রপ করতে, ব্যবহার করুনobject-fit: cover
— গ্যাব্রিয়েল গ্রান্ট
4
আমার পক্ষে কাজ করেছেন - @ কেভিনডির সমাধানের সাথে তুলনা করে - এটি প্রান্তের ক্ষেত্রে অনুপাত পরিবর্তন করে নি। চিয়ার্স!
— বার্নাবাস কেকসেকস
9
পুরোপুরি সমর্থিত হলে দুর্দান্ত হবে। এটিএম, দুর্ভাগ্যক্রমে আইই বা প্রান্ত উভয়ই এটিকে সমর্থন করে না।
— স্পেকট্রা
2
আপনি যদি সর্বোচ্চ-প্রস্থ এবং সর্বোচ্চ-উচ্চতা সেট করতে চান তবে আপনি এটি করতে পারেন। পুরোপুরি কাজ করে।
— সন্দীপ সুবেদী
3
দেখে মনে হচ্ছে যে আইই 11 এবং প্রান্ত 14/15 এর
— এমক্রোবে
106

জেপিইজি বা পিএনজি ফাইলের মতো স্থির-আকারের চিত্রগুলি সহ বর্তমানে কোনও ডিস্ট্রিমেন্টিক পদ্ধতিতে এটি সঠিকভাবে করার কোনও উপায় নেই।

আনুপাতিকভাবে একটি চিত্র মাপ পরিবর্তন করার জন্য, আপনাকে সেট করতে পারেন উচ্চতা বা "100%" থেকে প্রস্থ, তবে দুটো একসাথে।আপনি যদি উভয়কে "100%" তে সেট করেন তবে আপনার চিত্র প্রসারিত হবে।

উচ্চতা বা প্রস্থ করতে হবে তা চয়ন করা আপনার চিত্র এবং ধারক মাত্রার উপর নির্ভর করে:

  1. যদি আপনার চিত্র এবং ধারক উভয়ই "প্রতিকৃতি আকারের" বা উভয়ই "ল্যান্ডস্কেপ আকারের" হয় (তারা প্রশস্তের চেয়ে লম্বা হয় বা যথাক্রমে দৈর্ঘ্যের চেয়ে প্রশস্ত হয়) তবে কোনও উচ্চতা বা প্রস্থের "% 100" হওয়া কোনও বিষয় নয় it ।
  2. যদি আপনার চিত্র প্রতিকৃতি হয় এবং আপনার ধারক ল্যান্ডস্কেপ height="100%"হয় তবে আপনাকে অবশ্যই চিত্রটিতে সেট করতে হবে ।
  3. আপনার চিত্র যদি ল্যান্ডস্কেপ হয় এবং আপনার ধারক প্রতিকৃতি width="100%"হয় তবে আপনাকে অবশ্যই চিত্রটিতে সেট করতে হবে ।

যদি আপনার চিত্রটি কোনও এসভিজি হয়, যা ভেরিয়েবল-আকারের ভেক্টর চিত্রের ফর্ম্যাট হয় তবে আপনার ধারকটি স্বয়ংক্রিয়ভাবে ঘটতে ফিট করার জন্য আপনার প্রসার থাকতে পারে।

আপনাকে কেবল এটি নিশ্চিত করতে হবে যে এসভিজি ফাইলে এই বৈশিষ্ট্যগুলির মধ্যে <svg>কোনওটি ট্যাগে সেট করা নেই :

height
width
viewbox

বেশিরভাগ ভেক্টর অঙ্কন প্রোগ্রামগুলি এসভিজি ফাইল রফতানির সময় এই বৈশিষ্ট্যগুলি সেট করে দেবে, সুতরাং প্রতিবার আপনি যখন রফতানি করবেন তখন আপনাকে ম্যানুয়ালি আপনার ফাইলটি সম্পাদনা করতে হবে বা এটি করার জন্য একটি স্ক্রিপ্ট লিখতে হবে।

— নিল
সূত্র
2
এটা কি আমি নাকি এই পোস্টে বেশ কিছু ভুল রয়েছে? "'প্রতিকৃতি আকারের' বা উভয়ই 'ল্যান্ডস্কেপ শেপড' (যথাক্রমে লম্বা লম্বা এবং প্রশস্ত থেকে লম্বা লম্বা)" ... আপনার "স্বজনদের" কি চারপাশে পরিবর্তন করা উচিত নয়? এবং আপনার বুলেট পয়েন্ট ২ এবং ৩ এ, তারা দুজনেই বলেছে "আপনাকে অবশ্যই চিত্রের প্রস্থ =" 100% "সেট করতে হবে"। আমি অনুমান করছি যে আপনি অনুলিপি-পেস্ট করেছেন এবং এর মধ্যে একটি "প্রস্থ" এর পরিবর্তে "উচ্চতায়" পরিবর্তন করতে ভুলে গেছেন।
— বাটাল বাটকস
ঠিক ঠিক করে ফেলেছি। 2 এবং 3 এখন ভুল বা উভয়ই সঠিক হতে পারে, একটির পরিবর্তে ভুল এবং একটি সঠিক হওয়ার পরিবর্তে। সঠিক উত্তর কী তা আমি মনে করতে পারি না। ;)
— নীল
2
"বর্তমানে জেপিইজি বা পিএনজি ফাইলের মতো স্থির আকারের চিত্রগুলি সহ একটি নির্মল পদ্ধতিতে এটি সঠিকভাবে করার কোনও উপায় নেই?" এটি ঠিক ভুল বলে মনে হচ্ছে। @ Thorn007 এর উত্তর এমনভাবে প্রদান করে, এবং আমি নিজেকে ব্যবহার করেছি - stackoverflow.com/questions/12259736/...
— ড্যান Dascalescu
@ ড্যানডাসকলেসকু থর্ন 700 এর উত্তর চিত্রটি প্রযোজ্য নয় যদি এটি ধারকের চেয়ে ছোট হয়। আজকাল সর্বোত্তম সমাধান হ'ল একটি পটভূমি চিত্র এবং সেট সহ একটি উপাদান ব্যবহার করা background-size: contain।
— কেভিন সীমানা
"একটি চিত্রকে আনুপাতিক আকারে আকার দিতে, আপনাকে উচ্চতা বা প্রস্থকে" 100% "এ সেট করতে হবে, তবে উভয়ই নয়" " <ঠিক এইটাই আমাকে সাহায্য করেছিল। আপনাকে ধন্যবাদ
— আলেকজান্ডার সান্টোস
77

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

এইচটিএমএল সামগ্রী:

<div id="myDiv">
  <img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>

সিএসএস সামগ্রী:

#myDiv
{
  height: 104px;
  width: 140px;
}
#myDiv img
{
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}

JQuery অংশ:

var logoHeight = $('#myDiv img').height();
    if (logoHeight < 104) {
        var margintop = (104 - logoHeight) / 2;
        $('#myDiv img').css('margin-top', margintop);
    }
— বিনীত রাম্বল
সূত্র
1
সিএসএস ঠিক যেমন কাজ করতে চায় ঠিক তেমন কাজ করে, এবং আমি jQuery বিট এড়িয়ে গেলাম
— bkwdesign
48

এটাকে সহজ করো!

ধারকটিকে একটি স্থির দিন height এবং তারপরে তার imgভিতরে ট্যাগের জন্য সেট করুন widthএবং দিন max-height।

<div style="height: 250px">
     <img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>

পার্থক্যটি হল আপনি সেটটি width100% হিসাবে সেট করেছেন , এটি নয় max-width।

— মেহেদী মাগরোণী
সূত্র
2
চিত্রটি খুব লম্বা এবং ভিউপোর্ট সংক্ষিপ্ত হলে গুগল ক্রোমে চিত্রের অনুপাত পরিবর্তিত হয়।
— মিক্কো রেন্টালাইনেন
29

একটি সুন্দর হ্যাক।

আপনার কাছে ছবিটি প্রতিক্রিয়াশীল করার দুটি উপায় রয়েছে।

  1. যখন একটি চিত্র একটি পটভূমি চিত্র হয়।
#container{
    width: 300px;
    height: 300px;
    background-image: url(http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

<div id="container"><div>

এটি এখানে চালান

কিন্তু এক ব্যবহার করা উচিত imgইমেজ লাগাতে যেমন বেশী ভালো ট্যাগ background-imageপরিপ্রেক্ষিতে এসইও হিসাবে আপনি লিখতে পারেন শব্দ মধ্যে altএর imgট্যাগ। সুতরাং এখানে আপনি চিত্রটি প্রতিক্রিয়াশীল করতে পারেন।

  1. যখন ছবি imgট্যাগ হয়।
#container{
    max-width: 400px;
    overflow: hidden;
}
img{
    width: 100%;
    object-fit: contain;
}

<div id="container">
   <img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>

এটি এখানে চালান

— সিরাজ আলম
সূত্র
22

আপনি চিত্রটি একটি ডিভের জন্য ব্যাকগ্রাউন্ড হিসাবে সেট করতে পারেন এবং তারপরে CSS ব্যাকগ্রাউন্ড-আকারের বৈশিষ্ট্যটি ব্যবহার করতে পারেন :

background-size: cover;

এটি "ব্যাকগ্রাউন্ড চিত্রটি যথাসম্ভব বৃহত্তর হতে হবে যাতে ব্যাকগ্রাউন্ডের অঞ্চলটি পুরোপুরি পটভূমির চিত্র দ্বারা আচ্ছাদিত হয় the ব্যাকগ্রাউন্ড চিত্রের কিছু অংশ ব্যাকগ্রাউন্ড পজিশনিংয়ের অঞ্চলের মধ্যে নাও থাকতে পারে" - W3 স্কুল

— ছক শুকনো
সূত্র
আমি বিশ্বাস করি "ফিট একটি ডিভ কনটেইনার" দ্বারা ওপির অর্থ হ'ল চিত্রটি উভয় মাত্রায় থাকা উপাদানটির বাইরে প্রসারিত করা উচিত নয়। @ জোনাটাসওয়াকার এর সমাধানে, চিত্রটি ক্রপ করা হয়েছে। এছাড়াও একটি পটভূমি সমাধান পরিস্থিতির উপর নির্ভর করে শব্দার্থগতভাবে সঠিক না হতে পারে। উদাহরণস্বরূপ, আপনার altমূল্যবোধ এবং এ জাতীয় জিনিসগুলির প্রয়োজন হতে পারে (যদিও আপনি একটি ছদ্মবেশী চিত্রও যোগ করতে পারেন যা অ-সহায়ক সহ প্রযুক্তির অদৃশ্য)), বা আপনার এটিকে ক্লিকযোগ্য করার প্রয়োজন হতে পারে।
— বালজস
@ বালাজস এই ক্ষেত্রে সঠিক সেটিংসটি হবে background-size: containএবং আমি মনে করি যে আমি ব্যক্তিগতভাবে ডামি চিত্রের পথটি যাব কারণ এখানে জাভাস্ক্রিপ্ট ব্যতীত বর্ণিত যা করার সহজ উপায় নেই
— চক ড্রাইস
@ চকড্রাইস আমি আসলেই নিশ্চিত নই আপনি কী বোঝাতে চেয়েছেন, গৃহীত উত্তরটি সমস্যার সমাধান করে।
— বালজস
22

আমার সমাধানটি দেখুন: http://codepen.io/petethepig/pen/dvFsA

এটি কোনও জাভাস্ক্রিপ্ট কোড ছাড়াই খাঁটি সিএসএসে লেখা রয়েছে। এটি যে কোনও আকারের এবং যে কোনও ওরিয়েন্টেশনের চিত্রগুলি পরিচালনা করতে পারে।

যেমন এইচটিএমএল দেওয়া হয়েছে:

<div class="image">
  <div class="trick"></div>
  <img src="http://placekitten.com/415/200"/>
</div>

সিএসএস কোডটি হ'ল:

.image {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.trick {
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}
— দিমিত্রি
সূত্র
2
এটি খুব ছোট চিত্রগুলি পরিচালনা করে না।
— জোশ সি
1
@ জোশসি আপনার মানে কি? এই এক ভাল কাজ করে: codepen.io/petethepig/pen/maeFo
— দিমিত্রি
2
404 খুব ছোট ছবিগুলিতে।
— জোশ সি
আমি উল্লেখ করতে চেয়েছিলাম যে এই পদ্ধতিটি ভেরিয়েবল-প্রস্থের পাত্রেও কাজ করে। দিমিত্রি দুর্দান্ত কাজ!
— ক্যামিলো মার্টিন
একটি সামান্য পরিবর্তন এবং নিখুঁত: codepen.io/anon/pen/BoQmBw দিমিত্রি আপনাকে ধন্যবাদ।
— আলকিন
10

আমি সবেমাত্র একটি jQuery প্লাগইন প্রকাশ করেছি যা আপনাকে অনেকগুলি বিকল্পের সাথে ঠিক কীভাবে প্রয়োজন:

https://github.com/GestiXi/image-scale

ব্যবহার:

এইচটিএমএল

<div class="image-container">
    <img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>

জাভাস্ক্রিপ্ট

$(function() {
    $("img.scale").imageScale();
});
— নিকোলাস বাদিয়া
সূত্র
10

এই সমাধানটি চিত্রটিকে প্রসারিত করে না এবং পুরো পাত্রে পূর্ণ করে না, তবে এটি চিত্রটির কিছু অংশ কেটে দেয়।

এইচটিএমএল:

 <div><img src="/images/image.png"></div>

সিএসএস:

div {
    width: 100%;
    height: 10em;
    overflow: hidden;

img {
    min-width: 100%;
    min-height: 100%;
}
— মিয়া কলিংস্টেট
সূত্র
9

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

এটি বেশ সহজ। আমি যে পদ্ধতিটি গ্রহণ করেছি তা হ'ল নিখুঁতভাবে ধারকটির ভিতরে চিত্রটি স্থাপন করা এবং তারপরে এটি সংমিশ্রণটি ব্যবহার করে ঠিক এটি কেন্দ্রে রেখে দেওয়া:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

এটি একবার কেন্দ্রে আসার পরে আমি ছবিটি উপহার দিই, 

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

এটি চিত্রটি অবজেক্ট-ফিট: কভারের প্রভাব পেতে পারে।

এখানে উপরের যুক্তি প্রদর্শন করা হয়।

https://jsfiddle.net/furqan_694/s3xLe1gp/

এই যুক্তিটি সমস্ত ব্রাউজারে কাজ করে।

— ফুরকান রাহমথ
সূত্র
8

নিম্নলিখিতটি আমার পক্ষে নিখুঁতভাবে কাজ করে:

img{
   height: 99999px;
   object-fit:contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto auto;
}
— চং ঠোঁট ফাং
সূত্র
7

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

/* For this demo only */
.container {
  max-width: 300px;
  margin: 0 auto;
}
.img-frame {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
  background: #ee0;
  margin: 20px auto;
}

/* This is for responsive container with specified aspect ratio */
.aspect-ratio {
  position: relative;
}
.aspect-ratio-1-1 {
  padding-bottom: 100%;
}
.aspect-ratio-4-3 {
  padding-bottom: 75%;
}
.aspect-ratio-16-9 {
  padding-bottom: 56.25%;
}

/* This is the key part - position and fit the image to the container */
.fit-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 80%;
  max-height: 90%
}
.fit-img-bottom {
  top: auto;
}
.fit-img-tight {
  max-width: 100%;
  max-height: 100%
}
<div class="container">

  <div class="aspect-ratio aspect-ratio-1-1 img-frame">
    <img src="//placehold.it/400x300" class="fit-img" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-4-3 img-frame">
    <img src="//placehold.it/400x300" class="fit-img fit-img-tight" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/400x400" class="fit-img" alt="sample">
  </div>

  
  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/300x400" class="fit-img fit-img-bottom" alt="sample">
  </div>
  
</div>
স্নিপেট প্রসারিত করুন

আপনি স্বাধীনভাবে সর্বোচ্চ-প্রস্থ এবং সর্বোচ্চ উচ্চতা সেট করতে পারেন; চিত্রটি সবচেয়ে ছোটটিকে সম্মান করবে (চিত্রটির মান এবং দিক অনুপাতের উপর নির্ভর করে)। আপনি চান হিসাবে ইমেজ প্রান্তিককরণ করতে সেট করতে পারেন (উদাহরণস্বরূপ, একটি অনন্ত সাদা পটভূমিতে একটি পণ্যের ছবির জন্য আপনি এটিকে সহজেই নীচে অবস্থিত করতে পারেন)।

— actimel
সূত্র
5

আপনার ছবিটির জন্য যে উচ্চতা এবং প্রস্থের প্রয়োজন সেটিকে ডিভকে দিন যেখানে <img> ট্যাগ রয়েছে। সঠিক স্টাইল ট্যাগটিতে উচ্চতা / প্রস্থ দিতে ভুলবেন না।

<Img> ট্যাগে max-heightএবং max-widthএটি 100% হিসাবে দিন।

<div style="height:750px; width:700px;">
    <img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>

আপনি এটি সঠিক হওয়ার পরে উপযুক্ত ক্লাসে বিশদ যুক্ত করতে পারেন।

— AZD
সূত্র
5

নীচের কোডটি পূর্ববর্তী উত্তরগুলি থেকে অভিযোজিত এবং ডাকা একটি ছবি ব্যবহার করে আমার দ্বারা পরীক্ষিত storm.jpg ।

এটি এমন একটি সাধারণ পৃষ্ঠার সম্পূর্ণ HTML কোড যা চিত্রটি প্রদর্শন করে। এটি নিখুঁতভাবে কাজ করে এবং আমার দ্বারা www.resizemybrowser.com দ্বারা পরীক্ষিত হয়েছিল। আপনার প্রধান বিভাগের নীচে, আপনার এইচটিএমএল কোডের শীর্ষে সিএসএস কোড রাখুন। আপনি যেখানে ছবি চাইবেন সেখানে চিত্র কোডটি রাখুন।

<html>
    <head>
        <style type="text/css">
            #myDiv
            {
                  height: auto;
                  width: auto;
            }
            #myDiv img
            {
                max-width: 100%;
                max-height: 100%;
                margin: auto;
                display: block;
            }
        </style>
    </head>

    <body>
        <div id="myDiv">
            <img src="images/storm.jpg">
        </div>
    </body>
</html>
— দেনিযেল
সূত্র
5 
<style type="text/css">
    #container{
        text-align: center;
        width: 100%;
        height: 200px; /* Set height */
        margin: 0px;
        padding: 0px;
        background-image: url('../assets/images/img.jpg');
        background-size: content; /* Scaling down large image to a div */
        background-repeat: no-repeat;
        background-position: center;
    }
</style>

<div id="container>
    <!-- Inside container -->
</div>
— easd
সূত্র
2
যদি আপনি আপনার কোডটির কিছু ব্যাখ্যা যোগ করতে পারেন তবে এটি দুর্দান্ত লাগবে (আমি জানি সেখানে আপনার কিছু মন্তব্য আছে তবে কেন / কীভাবে এই প্রশ্নের উত্তর দেয় এটি আরও ভাল দেখায় তা সম্পর্কে কয়েকটি শব্দ)।
— প্রদর্শন নাম-নিখোঁজ
5

আপনি যেখানে ব্রাউজারটি স্থাপন করছেন তার উচ্চতা আপনাকে জানাতে হবে:

.example {
    height: 220px; /* DEFINE HEIGHT */
    background: url('../img/example.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
— গাদা
সূত্র
5

সম্পাদনা করুন: পূর্ববর্তী টেবিল-ভিত্তিক চিত্রের অবস্থানটি ইন্টারনেট এক্সপ্লোরার 11 এ সমস্যা ছিল ( উপাদানগুলিতে max-heightকাজ করে না display:table)। আমি এটিকে ইনলাইন ভিত্তিক পজিশনিংয়ের সাথে প্রতিস্থাপন করেছি যা কেবলমাত্র ইন্টারনেট এক্সপ্লোরার 7 এবং ইন্টারনেট এক্সপ্লোরার 11-এ কার্যকর হয় না, তবে এর জন্য কম কোডও প্রয়োজন less

এই বিষয়ে আমার গ্রহণ করা হয়। এটি কেবল তখনই কাজ করবে যখন ধারকটির একটি নির্দিষ্ট আকার থাকে ( max-widthএবং max-heightকন্ট্রাকের আকার নাযুক্ত পাত্রে সেগুলি পেতে মনে হয় না) তবে আমি সিএসএস সামগ্রীটি এমনভাবে লিখেছি যাতে এটি পুনরায় ব্যবহারের সুযোগ দেয় ( picture-frameশ্রেণি যুক্ত করুন) এবং px125আপনার বিদ্যমান পাত্রে আকার বর্গ)।

সিএসএসে:

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

এবং এইচটিএমএলে:

<a href="#" class="picture-frame px125">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>

ডেমো

কোড স্নিপেট দেখান

সম্পাদনা করুন: জাভাস্ক্রিপ্ট ব্যবহার করে আরও উন্নতি করা (চিত্রগুলি উপুড় করে):

function fixImage(img)
{
    var $this = $(img);
    var parent = $this.closest('.picture-frame');
    if ($this.width() == parent.width() || $this.height() == parent.height())
        return;

    if ($this.width() > $this.height())
        $this.css('width', parent.width() + 'px');
    else
        $this.css('height', parent.height() + 'px');
}

$('.picture-frame img:visible').each(function
{
    if (this.complete)
        fixImage(this);
    else
        this.onload = function(){ fixImage(this) };
});
— jahu
সূত্র
এই পদ্ধতিটি ব্যবহার করার ক্ষেত্রে একটি অপূর্ণতা রয়েছে। চিত্রটি লোড করতে ব্যর্থ হলে, Alt পাঠ্যটি প্যারেন্ট পাত্রে প্রদর্শিত হবে line-height। যদি Alt পাঠ্যের একাধিক লাইন থাকে, তবে এটি সত্যিই খারাপ দেখা শুরু করবে ...
— জাহু
5

নিম্নলিখিত কোড ব্যবহার করে আমি এই সমস্যাটি সমাধান করেছি:

<div class="container"><img src="image_url" /></div>
.container {
    height: 75px;
    width: 75px;
}

.container img {
    object-fit: cover;
    object-position: top;
    display: block;
    height: 100%;
    width: 100%;
}
— সারকান কনকসি
সূত্র
4

এখানে উত্তর হিসাবে , এটি আপনার ব্রাউজারে (ক্রোমের মতো) কাজ না করে vhপরিবর্তে আপনি ইউনিটগুলিও ব্যবহার করতে পারেন max-height: 100%:

img {
    max-height: 75vh;
}
— gaborous
সূত্র
1
মানেvh ? এবং Chrome এ কী কাজ করে না?
— মিস্টারম্যানসাম
@ মিস্টারমনসাম হ্যাঁ আপনাকে অনেক ধন্যবাদ, আমি এই উত্তরটি পোস্ট করার সময় গতকাল খুব ক্লান্ত হয়ে পড়েছিলাম। max-height: xx%(শতাংশ ইউনিট) কিছু উপাদানগুলির মতো ক্রোমে কাজ করে না imgতবে vhইউনিট তা করে। যাইহোক, শতকরা সঙ্গে কাজ height, width, max-width, ইত্যাদি
— gaborous
4

আমি হাইপারলিংকের অভ্যন্তরীণভাবে এবং উলম্বভাবে উভয় উপায়ে কেন্দ্রিক এবং আনুপাতিকভাবে একটি চিত্রকে স্কেল করেছি:

#link {
    border: 1px solid blue;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    width: 100px;
}
#link img {
    border: 1px solid red;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 60px;
    max-width: 60px;
}

এটি ইন্টারনেট এক্সপ্লোরার, ফায়ারফক্স এবং সাফারিতে পরীক্ষা করা হয়েছিল।

কেন্দ্রিং সম্পর্কে আরও তথ্য এখানে ।

— bancer
সূত্র
4

Thorn007 থেকে গৃহীত উত্তরটি যখন চিত্রটি খুব ছোট হয় তখন কাজ করে না ।

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

উদাহরণ:

<div style="width:400px; height:200px;">
  <img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-origin:left top;" />
</div>

মন্তব্য:

  1. ওয়েবকিটের জন্য আপনাকে অবশ্যই যুক্ত করতে হবে -webkit-transform:scale(4); -webkit-transform-origin:left top; স্টাইলে ।
  2. 4 এর স্কেল ফ্যাক্টর সহ আপনার সর্বাধিক প্রস্থ = 400/4 = 100 এবং সর্বাধিক উচ্চতা = 200/4 = 50
  3. একটি বিকল্প সমাধান হ'ল সর্বোচ্চ-প্রস্থ এবং সর্বোচ্চ উচ্চতা 25% এ সেট করা। এটা এমনকি সহজ।
— user217447
সূত্র
1
আপনি পুরো বাজারকে সমর্থন করার চেষ্টা করলে এটি খুব নির্ভরযোগ্য সমাধান নয়। আপনি ব্রাউজারগুলির পক্ষে কোনও ধরণের ফ্যালব্যাক না নিলে আমি CSS3 সাফ জানিয়ে দিচ্ছি যা এটি সমর্থন করে না।
— ডুয়াদওয়াদ
4

আপনি যদি বুটস্ট্র্যাপ ব্যবহার করছেন তবে আপনাকে কেবল ট্যাগটিতে img-responsiveক্লাস যুক্ত করতে হবে img:

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

বুটস্ট্র্যাপ চিত্র

— HoangYell
সূত্র
3

একটি সহজ সমাধান (4-পদক্ষেপের সমাধান !!) যা আমার পক্ষে কাজ করে বলে মনে হচ্ছে, নীচে রয়েছে। উদাহরণটি সামগ্রিক আকার নির্ধারণ করতে প্রস্থটি ব্যবহার করে তবে উচ্চতাটি ব্যবহারের পরিবর্তে আপনি এটিকে উল্টাতে পারেন।

  1. চিত্র ধারকটিতে সিএসএস স্টাইলিং প্রয়োগ করুন (উদাহরণস্বরূপ, <img>)
  2. আপনার পছন্দসই মাত্রায় প্রস্থের সম্পত্তি সেট করুন
    • মাত্রাগুলির %জন্য, আপেক্ষিক আকারের জন্য ব্যবহার করুন বা অটস্কোলিং (চিত্র ধারক বা প্রদর্শনের ভিত্তিতে)
    • ব্যবহারের px(অথবা অন্যান্য) একটি স্ট্যাটিক অথবা সেট মাত্রা জন্য
  3. প্রস্থের উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে সামঞ্জস্য করতে উচ্চতার বৈশিষ্ট্যটি সেট করুন
  4. উপভোগ করুন!

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

<img style="width:100%; height:auto;"
    src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>
— তরুণ চিসানো
সূত্র
3

গৃহীত উত্তর সহ সমস্ত সরবরাহিত উত্তর কেবলমাত্র এই ধারনাটির অধীনে কাজ করে যে divমোড়ক একটি নির্দিষ্ট আকারের। সুতরাং এটি এটি আকারে যাই হোক না কেন এটি করতে হয়div মোড়কের যায় এবং যদি আপনি একটি প্রতিক্রিয়াশীল পৃষ্ঠাটি বিকাশ করেন তবে এটি খুব কার্যকর:

আপনার DIVনির্বাচনের ভিতরে এই ঘোষণা লিখুন :

width: 8.33% /* Or whatever percentage you want your div to take */
max-height: anyValueYouWant /* (In px or %) */

তারপরে এই ঘোষণাগুলি আপনার IMGনির্বাচকের ভিতরে রাখুন :

width: "100%" /* Obligatory */
max-height: anyValueYouWant /* (In px or %) */

অনেক গুরুত্বপূর্ণ:

মান এবং নির্বাচক উভয়ের জন্য maxHeightঅবশ্যই একই হতে হবে ।DIVIMG

— বিল্লাল বেগেরাদজ
সূত্র
1
সিএসএসের সঠিক ঘোষণাটি উটের ক্ষেত্রে সর্বাধিক উচ্চতার চেয়ে 'সর্বোচ্চ-উচ্চতা'।
— মার্ক টাউনসেন্ড
3

একটি সহজ সমাধান হ'ল ফ্লেক্সবক্স ব্যবহার করা। ধারকটির সিএসএস এটিকে সংজ্ঞায়িত করুন:

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
    /* Any custom height */
}

অন্তর্ভুক্ত চিত্রের প্রস্থটি 100% এ সমন্বিত করুন এবং আপনার ধারকগুলিতে সংরক্ষণিত মাত্রাগুলি সহ একটি দুর্দান্ত কেন্দ্রিক চিত্র পাওয়া উচিত।

— মাতেও মেরিন
সূত্র
1

সমাধানটি কয়েকটি গণিতের সাথে সহজ ...

চিত্রটি একটি ডিভের মধ্যে এবং তারপরে এইচটিএমএল ফাইলে রাখুন যেখানে আপনি চিত্রটি নির্দিষ্ট করেছেন। প্রস্থের উচ্চতার যথার্থ অনুপাত গণনা করতে চিত্রের পিক্সেল মানগুলি ব্যবহার করে শতাংশে প্রস্থ এবং উচ্চতার মান নির্ধারণ করুন।

উদাহরণস্বরূপ, বলুন আপনার কাছে এমন একটি চিত্র রয়েছে যার প্রস্থ 200 পিক্সেল এবং উচ্চতা 160 পিক্সেল। আপনি নিরাপদে বলতে পারেন যে প্রস্থের মান 100% হবে, কারণ এটি বৃহত্তর মান। তারপরে উচ্চতার মান গণনা করার জন্য আপনি উচ্চতাটিকে প্রস্থের সাথে ভাগ করুন যা 80% এর শতাংশের মান দেয়। কোডটিতে এটি দেখতে এরকম কিছু দেখাবে ...

<div class="image_holder_div">
    <img src="some_pic.png" width="100%" height="80%">
</div>
— user2796283
সূত্র
1

এটি করার সহজ উপায় হ'ল object-fit:

<div class="container">
  <img src="path/to/image.jpg">
</div>

.container{
   height: 300px;
}

.container img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

আপনি যদি বুটস্ট্র্যাপ ব্যবহার করছেন তবে কেবল img-responsiveক্লাস যুক্ত করুন এবং এতে পরিবর্তন করুন

.container img{
    object-fit: cover;
}
— জোসেফ লারিওসা
সূত্র
-1

অথবা আপনি কেবল ব্যবহার করতে পারেন:

background-position:center;
background-size:cover;

এখন চিত্রটি ডিভের সমস্ত স্থান নেবে।

— শরীফুর রবিন
সূত্র
1
এটি এর আকার পরিবর্তন সম্পর্কে প্রান্তিককরণ সম্পর্কে নয়।
— বালজিৎসিংহ
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.