<বাটন> উপাদানটিতে চিত্র এম্বেড করুন

Question

আমি <button>এইচটিএমএলে কোনও উপাদানটিতে একটি পিএনজি চিত্র প্রদর্শন করার চেষ্টা করছি । বোতামটি চিত্রের মতো একই আকারের এবং চিত্রটি প্রদর্শিত হয় তবে কোনও কারণে কেন্দ্রে নেই - তাই এটি সমস্ত কিছু দেখা অসম্ভব। অন্য কথায় মনে হয় চিত্রটির উপরের ডান দিকের কোণটি বোতামটির ঠিক মাঝখানে অবস্থিত এবং বোতামের উপরের ডানদিকে নয়।

এটি এইচটিএমএল কোড:

<button id="close" class="closing" onClick="javascript:close_clip()"><img src="icons/close.png" /></button>

আপডেট:
আসলে যা ঘটে তা আমার মনে হয়, একটি প্রান্তিক সমস্যা। আমি একটি দুটি পিক্সেল মার্জিন পেয়েছি, তাই পটভূমি চিত্রটি বোতামটির বাইরে চলে যাচ্ছে। বোতাম এবং ইমেজ একই আকার, যা শুধুমাত্র হয় 20px, তাই এটি খুব চোখে পড়ার মত আছে ... আমি চেষ্টা margin:0, padding:0কিন্তু এটা সাহায্য করেনি ...

Comments

আমার জন্য, এটি পুরোপুরি কাজ করে ... আপনি যা অনুভব করছেন তার প্রসঙ্গটি কোনটি? কোডের আরও কয়েকটি লাইন পোস্ট করা সম্ভব?

আপনি কী দেখতে পাচ্ছেন তা দেখতে আমাদের জন্য জেএস ফিডেলের মতো কোনও লাইভ সাইটে এটি পুনরুত্পাদন করতে পারেন ?

— ডেভিড বলেছেন মনিকা

Answer 1

আপনি ইনপুট ধরণের চিত্র ব্যবহার করতে পারেন।

<input type="image" src="http://example.com/path/to/image.png" />

এটি একটি বোতাম হিসাবে কাজ করে এবং এতে ইভেন্ট হ্যান্ডলারগুলি সংযুক্ত থাকতে পারে।

বিকল্পভাবে, আপনি ব্যাকগ্রাউন্ড ইমেজ সহ আপনার বোতামটি স্টাইল করতে, এবং সীমানা, মার্জিন এবং যথাযথভাবে সেট করতে সিএসএস ব্যবহার করতে পারেন।

<button style="background: url(myimage.png)" ... />

Comments

... এবং ফর্মটি জমা দেওয়ার জন্য কোনও জাভাস্ক্রিপ্টের দরকার নেই।

— কমফ্রিচ

-1: " উচিত " একটি শব্দ খুব শক্তিশালী, যেহেতু এটি আসলে এর <input type="image">জন্য ডিজাইন করা হয়নি। আপনি সিএসএসের পরামর্শ দিবেন না কেন?

— ওয়েসলি মার্চ

আমি একটি বোতাম ব্যবহার করার জন্য preffer। আমি যদি কোন উত্তর না পাই তবে আমি এটি করব। ধন্যবাদ

— অমিত হাজিন

তারপরে এটি স্টাইল করুন, যেমন এটি এবং অন্যান্য উত্তরে উল্লিখিত হয়েছে।

— অ্যান্ড্রু নাপিত

ভুলে যাবেন না যে উভয় প্রারম্ভিক শেষের ট্যাগগুলি বোতামের উপাদানটির জন্য প্রয়োজনীয়, সুতরাং প্রযুক্তিগতভাবে <বাটন /> বৈধ নয়, এটি <বাটন> </ বাটন> হওয়া উচিত।

— তামাস সিজনে

Answer 2

যদি চিত্রটি অর্থগত উপাত্তের টুকরো হয় (উদাহরণস্বরূপ একটি প্রোফাইল চিত্রের মতো), তবে <img>আপনার অভ্যন্তরের কোনও উপাদান <button>ব্যবহার করুন এবং এর আকার পরিবর্তন করতে CSS ব্যবহার করুন <img>। চিত্রটি যদি কোনও বোতামকে দৃষ্টি আকর্ষণীয় করে তোলে তবে background-imageএটি স্টাইল করতে সিএসএস ব্যবহার করুন <button>(এবং এটি ব্যবহার করবেন না <img>)।

ডেমো: http://jsfiddle.net/ThinkingStiff/V5Xqr/

এইচটিএমএল:

<button id="close-image"><img src="http://thinkingstiff.com/images/matt.jpg"></button>
<button id="close-CSS"></button>

সিএসএস:

button {
    display: inline-block;
    height: 134px;
    padding: 0;
    margin: 0;
    vertical-align: top;
    width: 104px;
}

#close-image img {
    display: block;
    height: 130px;  
    width: 100px;
}

#close-CSS {
    background-image: url( 'http://thinkingstiff.com/images/matt.jpg' );
    background-size: 100px 130px;
    height: 134px;  
    width: 104px;
}

আউটপুট:

Comments

@ থিংকিং স্টিফ <image>উপাদান? আমি মনে করি <img>আপনার পাঠ্যে অর্থ বোঝানো হয়েছে;)

— কমফ্রিচ

ভাল উত্তরের জন্য ধন্যবাদ !! তবে সমস্যাটি রয়ে গেছে ... আমি প্রশ্নটি কিছুটা আপডেট করেছি - সম্ভবত এটি আপনাকে বেটে বুঝতে সহায়তা করতে পারে।

— অমিত হাজিন

@ অমিতহাগিন আমি আপনার আপডেট দেখেছি মনে রাখবেন একটি বোতামের সীমানা রয়েছে যা এর উচ্চতার গণনায় অন্তর্ভুক্ত। সুতরাং একটি 20pxলম্বা চিত্র ফিট করতে , বোতামের উচ্চতা হতে হবে 24px।

— থিঙ্কিংস্টিফ

এছাড়াও @AmitHagin, প্রতিরোধ হোয়াইটস্পেস বিষয়, আপনার পরিবর্তন <img>করতে display: block;। আমি এটি প্রদর্শনের জন্য ডেমো লিঙ্কটি আপডেট করেছি।

— থিংকস্টিফ

এই পদ্ধতির সাথে অ্যাক্সেসিব্লাইটি / ওয়েল পাঠ্য সম্পর্কে কোনও উদ্বেগ রয়েছে? আমি সত্যিই মরিচা, তবে পাঠ্যটি কয়েক হাজার পিক্সেল দ্বারা অফসেট করে লুকিয়ে রাখছি তা এখনও স্বীকৃত কাজের মতো?

— রব ড্রিমি

Answer 3

এটা চেষ্টা কর

   <input type="button" style="background-image:url('your_url')"/>

Answer 4

কোনও ছবিতে কোনও বোতামে রাখার সহজ উপায়:

<button onclick="myFunction()"><img src="your image name here.png"></button>

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

Answer 5

আপনি কোনও onclickবৈশিষ্ট্যযুক্ত কোনও চিত্র কেন ব্যবহার করবেন না ?

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

<script>
function myfunction() {
}
</script>
<img src='Myimg.jpg' onclick='myfunction()'>

Answer 6

আপনার প্রকল্পে চিত্রের নাম সহ নতুন ফোল্ডার যুক্ত করুন। কিছু চিত্র চিত্র ফোল্ডারে রাখুন Put তাহলে এটি ঠিকঠাক কাজ করবে।

<input type="image" src="~/Images/Desert.jpg" alt="Submit" width="48" height="48">

Answer 7

এই বিন্যাসটির মতো চেষ্টা করুন এবং চিত্রের আকার পরিচালনা করতে "প্রস্থ" বৈশিষ্ট্যটি ব্যবহার করুন, এটি সহজ simple জাভাস্ক্রিপ্টও উপাদান প্রয়োগ করা যেতে পারে।

<button><img src=""></button>

Answer 8

বাটনগুলি সরাসরি চিত্রগুলিকে সমর্থন করে না। তাছাড়া আপনি যেভাবে করছেন তা লিঙ্কগুলির জন্য ()

শৈলীতে BACKGROUND-IMAGE বৈশিষ্ট্য ব্যবহার করে বাটনগুলিতে চিত্রগুলি যুক্ত করা হয়

আপনি ট্যাগ ব্যবহার করে পুনরাবৃত্তি এবং অন্যান্য বৈশিষ্ট্যগুলিও নির্দিষ্ট করতে পারেন

উদাহরণস্বরূপ: একটি বোতামে যুক্ত একটি মৌলিক চিত্রটিতে এই কোডটি থাকবে:

    <button style="background-image:url(myImage.png)">

শান্তি

Comments

আপনার উত্তরটি ভুল, অফিসিয়াল ডকুমেন্টেশন বলছে যে এটি অনুমোদিত।

— বিফোব