সিএসএসে কোনও চিত্রের সর্বাধিক প্রস্থ কীভাবে সেট করবেন

Question

আমার ওয়েবসাইটে আমি একটি নির্দিষ্ট আকার ( width: 600px) সহ একটি নতুন উইন্ডোতে ব্যবহারকারীর দ্বারা আপলোড করা চিত্রগুলি প্রদর্শন করতে চাই । সমস্যাটি হ'ল চিত্রগুলি বড় হতে পারে। সুতরাং তারা যদি এগুলির চেয়ে বড় হয় তবে 600pxআমি অনুপাতের অনুপাত সংরক্ষণ করে তাদের আকার পরিবর্তন করতে চাই।

আমি max-widthসিএসএস সম্পত্তি চেষ্টা করেছিলাম , কিন্তু এটি কাজ করে না: চিত্রটির আকার পরিবর্তন হয় না।

এই সমস্যা সমাধানের জন্য কোনো উপায় আছে কি?

এইচটিএমএল :

<div id="ImageContainerr">
    <img src="DisplayImage.do?ad_id=${requestScope.advert.id}" class="Image" />
</div>

সিএসএস :

img.Image { max-width: 100%;}
div#ImageContainer { width: 600px; }

আমি max-width: 600pxএকটি চিত্রের জন্য সেট করার চেষ্টাও করেছি , তবে কাজ করে না। চিত্রটি একটি সার্লেট থেকে স্ট্রিম করা হয়েছে (এটি টমক্যাট এর ওয়েবঅ্যাপস ফোল্ডারের বাইরে সজ্জিত)।

Comments

আপনি যদি এটি অটো স্কেল ডাউন করতে চান তবে কেবল সেট করুন max-width, সেট করবেন না max-heightএবং এটি কাজ করা উচিত। যদি তা না হয় তবে আপনার কোডটি পোস্ট করুন যাতে অন্যরা আপনাকে সমস্যাটি চিহ্নিত করতে সহায়তা করতে পারে।

— রায় চেং

আমি আপনার উদাহরণটি চেষ্টা করেছি এবং এটি এখানে কাজ করে। আপনি কি নিশ্চিত যে এই উদাহরণটিতে যেমন আপনার প্রকৃত এইচটিএমএল ("চিত্রকন্টিনিয়র") তেমন টাইপ নেই?

— মিস্টার লিস্টার

জঘন্য, আপনি ঠিক বলেছেন। আমি আমার টোম্যাট এবং ব্রাউজারটি আবার চালু করেছি, আবার চেষ্টা করেছি - এবং এটি সত্যিই ঠিকঠাক কাজ করে। যাইহোক ধন্যবাদ :) টাইপোর ঘটনাটি ছিল না - আমি এখানে আইডি এবং শ্রেণীর নাম পরিবর্তন করেছি যাতে এটি বোঝা সহজ হবে।

— ব্যবহারকারী 1315305

এ থেকে আমি ধরে নেব যে আপনি ফায়ারব্যাগ বা অন্যান্য বিকাশকারী সরঞ্জাম ব্যবহার করবেন না। আমি আপনাকে নিজেকে ফায়ারব্যাগ পেতে এবং এটি ব্যবহার করতে শিখতে চাই। (এই দুটি উপাদান পর্যবেক্ষণ করে আপনি দেখতে পাবেন যে প্রস্থটিতে প্রস্থটি যুক্ত করা হয়নি)

— জুনাস

সতর্কতা: এই প্রশ্নটি প্রাথমিকভাবে প্রদর্শিত হওয়ার চেয়ে ব্যাপকভাবে প্রযোজ্য। দেখে মনে হচ্ছে অনেকগুলি আপোভেটস হতে পারে কারণ এই আপভোটাররাও মিস করেছেন যেidএখানে সিএসএসের সাথে মেলে না। লিখিত হিসাবে (20151201), এই প্রশ্নটি এটিকে উত্থিত করে, "সিএসএস নির্বাচনকারীরা যে কোনও ডিওএম অবজেক্টের সাথে মেলে না তা উপস্থিতিকে প্রভাবিত করে না"। ; ^) (এর শিরোনামটি কী বোঝায় তা জিজ্ঞাসা করার জন্য প্রশ্নটি সম্পাদনা করা ভাল কিনা তা অনুমান করা যায় না ...)

— ruffin

Answer 1

আপনি এটি লিখতে পারেন:

img{
    width:100%;
    max-width:600px;
}

এই http://jsfiddle.net/ErNeT/ দেখুন

Comments

অনেক ধন্যবাদ! এটি পুরোপুরি কাজ করে! সম্পাদনা: আচ্ছা, নিরলসভাবে নয় - এটি চিত্রগুলিও আকার দেয় যা 600px এর চেয়ে কম ছোট - এবং এটি আমি চাই না।

— ব্যবহারকারী 1315305

আমি ভোট দিয়েছি। ওপি যা চায় তা আপনার দেওয়া অফার নয়। আপনিও বুঝতে পেরেছিলেন যে ওপির কোডে কোনও সমস্যা হতে পারে যা সাধারণত তিনি চেষ্টা করেছিলেন, কাজ করা উচিত .. যিনি কখনও ভোট দিয়েছিলেন, আমাকে একটি কারণ দিন, ধন্যবাদ।

— জুনাস

@ লোলেরো প্রথমে আমার উত্তরের পরে ওপিকে তার প্রশ্নটি সম্পাদনা করুন এবং আপনি কি উত্তর দিতে পারেন যে আমার উত্তরে কী আছে? ধন্যবাদ

— সন্দীপ

এটি

— IE- তে

"প্রস্থ: 100%" এর উদ্দেশ্য কী? লিঙ্কযুক্ত ফ্রিডলটি এগুলি না করে ঠিকঠাক কাজ করবে বলে মনে হচ্ছে? (ম্যাক ওএক্স ফায়ারফক্স এবং সাফারিতে পরীক্ষিত)

— জন স্নাইডার

Answer 2

আমি দেখতে পাই এর চূড়ান্ত হিসাবে উত্তর দেওয়া হয়নি।

আমি দেখতে পাচ্ছি যে আপনার সর্বোচ্চ প্রস্থ 100% এবং প্রস্থ 600 হবে। এগুলি ফ্লিপ করুন।

একটি সহজ উপায় হ'ল:

     <img src="image.png" style="max-width:600px;width:100%">

আমি এটি প্রায়শই ব্যবহার করি এবং তারপরে আপনি স্বতন্ত্র চিত্রগুলিও নিয়ন্ত্রণ করতে পারেন এবং সমস্ত আইএমজি ট্যাগে তা রাখেন না। আপনি এটি নীচের মত সিএসএস করতে পারে।

 .image600{
     width:100%;
     max-width:600px;
 }

     <img src="image.png" class="image600">

Answer 3

সমস্যাটি হ'ল ইমগ ট্যাগটি ইনলাইন উপাদান এবং আপনি ইনলাইন উপাদানগুলির প্রস্থকে সীমাবদ্ধ করতে পারবেন না।

সুতরাং প্রথমে img ট্যাগের প্রস্থকে সীমাবদ্ধ করার জন্য আপনাকে এটিকে একটি ইনলাইন-ব্লক উপাদানে রূপান্তর করতে হবে

img.Image{
    display: inline-block;
}

Answer 4

আপনার ধারক প্রস্থ 600px দেওয়া হয়েছে।

আপনি যদি তার চেয়ে বেশি বড় চিত্রগুলি ভিতরে ফিট করতে চান তবে যুক্ত করুন: সিএসএস:

#ImageContainer img {
    max-width: 600px;
}

আপনি যদি সমস্ত চিত্রগুলি বায়বীয় (600px) স্থান নিতে চান:

#ImageContainer img {
    width: 600px;
}

Comments

এছাড়াও, ওপিতে করা মন্তব্যগুলি ইঙ্গিত দেয় যে আপনি সিএসএস ফাইলে কোনও ভুল আইডি ব্যবহার করছেন: # # চিত্রসংযোগকারী <div id = "ImageContainerr">

— লিও

Answer 5

এটা চেষ্টা কর

 div#ImageContainer { width: 600px; }
 #ImageContainer img{ max-width: 600px}

Comments

এটি সঠিক নয়। আপনার নির্বাচকটির অর্থ "একটি চিত্রের উপাদানের অভ্যন্তরে একটি আইএমজি উপাদান"।

— মিস্টার লিস্টার

Answer 6

আপনার সিএসএস প্রায় সঠিক। আপনি কেবল display: block;চিত্র সিএসএসে নিখোঁজ রয়েছেন । আপনার আইডিতে একটি টাইপও। এটা করা উচিত<div id="ImageContainer">

img.Image { max-width: 100%; display: block; }
div#ImageContainer { width: 600px; }

<div id="ImageContainer">
    <img src="http://placehold.it/1000x600" class="Image">
</div>