কোনও চিত্রের অধীনে ক্যাপশন কীভাবে লিখবেন?

Question

আমার দুটি ছবি আছে যা ইনলাইন রাখতে হবে; আমি প্রতিটি চিত্রের নিচে ক্যাপশন লিখতে চাই।

<center>
   <a href="http://example.com/hello">
       <img src="hello.png" width="100px" height="100px">
   </a>
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
   <a href="http://example.com/hi">
       <img src="hi.png" width="100px" height="100px">
   </a>
</center>

আমি কীভাবে বাস্তবায়ন করতে পারি?

Comments

@ceejayoz &nbspমার্জিন নির্ধারণ, বা অন্যান্য CSS লেআউট সরঞ্জাম ব্যবহার করার বিরোধিতা হিসাবে সমস্ত উল্লেখ না করে।

— jzworkman

এটির মূলত জবাব দেওয়া হয়েছে, তবে একটি ইনলাইন চিত্রের প্রস্থের সাথে ফিট করার জন্য ক্যাপশন পাওয়ার একমাত্র উপায় হ'ল একটি মোড়ক বা ক্যাপশনের নিজেই প্রস্থের সম্পত্তিটির হার্ড-কোড করা।

— MyNameIsKo

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

— টোমা জ্যাটো - মনিকা

Answer 1

চিত্র এবং ফিগক্যাপশন ট্যাগ:

<figure>
    <img src='image.jpg' alt='missing' />
    <figcaption>Caption goes here</figcaption>
</figure>

ভালোবাসি এইচটিএমএল 5।

---

নমুনা দেখুন

#container {
    text-align: center;
}
a, figure {
    display: inline-block;
}
figcaption {
    margin: 10px 0 0 0;
    font-variant: small-caps;
    font-family: Arial;
    font-weight: bold;
    color: #bb3333;
}
figure {
    padding: 5px;
}
img:hover {
    transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
}
img {
    transition: transform 0.2s;
    -webkit-transition: -webkit-transform 0.2s;
    -moz-transition: -moz-transform 0.2s;
    -o-transition: -o-transform 0.2s;
}

<div id="container">
    <a href="#">
        <figure>
            <img src="http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />
            <figcaption>First image</figcaption>
        </figure>
    </a>
    <a href="#">
        <figure>
             <img src="http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />
            <figcaption>Second image</figcaption>
        </figure>
    </a>
</div>

Comments

যদিও আপনার বেশিরভাগ IE এর জন্য আপনার এইচটিএমএল 5 শিম লাগবে।

— ceejayoz

এই ট্যাগগুলি কোনওভাবেই সহায়তা করে না। এগুলি কেবল ডামি মার্কআপ, এবং আপনাকে সিএসএসে (এবং / অথবা অন্যান্য HTML ট্যাগ সহ) সমস্ত কাজ করতে হবে। এবং IE এর পুরানো সংস্করণগুলি ডামি ট্যাগ হিসাবে স্বীকৃতি দেওয়ার জন্য আপনাকে অতিরিক্ত ক্রিয়াকলাপ প্রয়োজন need সুতরাং এটি ব্যবহার করা সহজ divবা span।

— Jukka K. Korpela

@ JukkaK.Korpela এই ট্যাগগুলি খুব গুরুত্বপূর্ণ। stackoverflow.com/a/17272444/756329 এবং html5doctor.com/lets-talk-about-semantics

— জোসেফ হ্যানসেন

সমস্যা এই যে, [figures] can be moved to another page or to an appendix without affecting the main flow। <figure>এবং <figcaption>ক্যাপশন সহ চিত্রগুলির জন্য সাধারণ-উদ্দেশ্যে প্রতিস্থাপন নয়। তারা শুধুমাত্র পরিসংখ্যান প্রয়োগ। যদি আপনার (উদাহরণস্বরূপ) ক্যাপশনযুক্ত ফটোগুলির সাথে অন্তর্নিহিত অনুচ্ছেদগুলি নিয়ে একটি ধাপে ধাপে থাকে তবে এইচটিএমএল অনুসারে চিত্রগুলি একই অনুচ্ছেদে বিরতিতে উপস্থাপন করা গুরুত্বপূর্ণ হবে। সুতরাং <figure>এখানে (যেমন আমি বুঝতে পারি) প্রযোজ্য হবে না।

— পোনকডুডল

আমি যুক্ত করব যে এই রেখাগুলি একটি চিত্রের অধীনে কোনও চিত্রের শিরোনাম অগত্যা রাখবে না । এখানে প্রদত্ত এইচটিএমএল সামগ্রীটি বর্ণনা করে তবে চেহারাটি সিএসএস দ্বারা প্রভাবিত / নির্ধারিত হয়।

— jvriesem

Answer 2

সিএসএস

#images{
    text-align:center;
    margin:50px auto; 
}
#images a{
    margin:0px 20px;
    display:inline-block;
    text-decoration:none;
    color:black;
 }

এইচটিএমএল

<div id="images">
    <a href="http://xyz.com/hello">
        <img src="hello.png" width="100px" height="100px">
        <div class="caption">Caption 1</div>
    </a>
    <a href="http://xyz.com/hi">
        <img src="hi.png" width="100px" height="100px"> 
        <div class="caption">Caption 2</div>
    </a>
</div>​

একটা ঝাঁকুনি এখানে আছে।

Answer 3

<div style="margin: 0 auto; text-align: center; overflow: hidden;">
  <div style="float: left;">
    <a href="http://xyz.com/hello"><img src="hello.png" width="100px" height="100px"></a>
    caption 1
  </div>
 <div style="float: left;">
   <a href="http://xyz.com/hi"><img src="hi.png" width="100px" height="100px"></a>
   caption 2                      
 </div>
</div>

Answer 4

চিত্রটি রাখুন - এর লিঙ্কের অভ্যন্তরে - এর প্রস্থ 140px বলা যাক:

<a><img src='image link' style='width: 140px'></a>

এরপরে, একটিতে ক্যাপশনটি রাখুন এবং এটি কেন্দ্রীভূত করার সময় আপনার চিত্রের চেয়ে প্রস্থ কম দিন:

<a>
  <img src='image link' style='width: 140px'>
  <div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>

এর পরে, লিঙ্ক ট্যাগটিতে লিঙ্কটি এমন স্টাইল করুন যাতে এটি আর কোনও লিঙ্কের মতো না দেখায়। আপনি এটি যে কোনও রঙ দিতে পারেন, তবে আপনার লিঙ্কগুলি বহন করতে পারে এমন কোনও পাঠ্য সজ্জা সরিয়ে ফেলুন।

<a style='text-decoration: none; color: orange;'>
  <img src='image link' style='width: 140px'>
  <div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>

আমি কোনও লিঙ্কে ছবিটির ক্যাপশন দিয়ে জড়িয়ে দিয়েছি যাতে কোনও পাঠ্য ক্যাপশনটিকে এড়িয়ে যেতে না পারে: লিঙ্কটি দিয়ে ছবিটিতে ক্যাপশনটি আবদ্ধ। এখানে একটি উদাহরণ রয়েছে: http://www.alphaeducational.com/p/okay.html

Comments

<div>ইনলাইন ট্যাগগুলির মতো ব্লক ট্যাগগুলিকে অনুমোদিত নয় <a>- আপনার <span>ক্যাপশনগুলির জন্য ব্যবহার করা উচিত ।

— mindplay.dk 22'15

<স্পেন> এর সাথে <ডিআইভি> প্রতিস্থাপন পুরোপুরি ব্যর্থ হয়েছে @ দ্য আলফার উদাহরণে। দেখে মনে হচ্ছে আপনার <ডিভি> দরকার।

— পিয়ের

@ mindplay.dk আমি মনে করি কারণ aট্যাগটির সামগ্রীর মডেলটি স্বচ্ছ কারণ এটি পিতামাতাদের দ্বারা যে কোনও শিশুকে গ্রহণ করতে পারে (ইন্টারেক্টিভ সামগ্রী বাদে)। আমি ভুল হলে শুধরে? আমি শিখতে চাই. w3.org/TR/html5/text-level-semantics.html#the-a-element

— ক্রিস বিয়ার

Answer 5

সিএসএস আপনার বন্ধু; কেন্দ্রের ট্যাগের কোনও প্রয়োজন নেই (এটি একে একে যথেষ্ট অবমূল্যায়ন করা উচিত নয়) বা অতিরিক্ত অ-ব্রেকিং স্পেসও নেই। এখানে একটি সহজ উদাহরণ:

সিএসএস

.images {
    text-align:center;
}
.images img {
    width:100px;
    height:100px;
}
.images div {
    width:100px;
    text-align:center;
}
.images div span {
    display:block;
}
.margin_right {
    margin-right:50px;
}
.float {
    float:left;
}
.clear {
    clear:both;
    height:0;
    width:0;
}

এইচটিএমএল

<div class="images">
    <div class="float margin_right">
        <a href="http://xyz.com/hello"><img src="hello.png" width="100px" height="100px" /></a>
        <span>This is some text</span>
    </div>
    <div class="float">
        <a href="http://xyz.com/hi"><img src="hi.png" width="100px" height="100px" /></a>
        <span>And some more text</span>
    </div>
    <span class="clear"></span>
</div>

Answer 6

প্রতিক্রিয়াশীল ইমেজ জন্য। আপনি চিত্র ট্যাগের মধ্যে ছবি এবং উত্স ট্যাগ যুক্ত করতে পারেন।

<figure>
  <picture>
    <source media="(min-width: 750px)" srcset="images/image_2x.jpg"/>
    <source media="(min-width: 500px)" srcset="images/image.jpg" />
    <img src="images.jpg" alt="An image">
  </picture>
  <figcaption>Caption goes here</figcaption>
</figure>

Answer 7

আরও শব্দার্থগতভাবে সঠিক হতে ও পাশাপাশি পাশাপাশি সারিবদ্ধ করার বিষয়ে ওপিগুলি মূল প্রশ্নের উত্তর দিতে আমি এটি ব্যবহার করব:

এইচটিএমএল

<div class="items">
<figure>
    <img src="hello.png" width="100px" height="100px">
    <figcaption>Caption 1</figcaption>
</figure>
<figure>
    <img src="hi.png" width="100px" height="100px"> 
    <figcaption>Caption 2</figcaption>
</figure></div>

সিএসএস

.items{
text-align:center;
margin:50px auto;}


.items figure{
margin:0px 20px;
display:inline-block;
text-decoration:none;
color:black;}

https://jsfiddle.net/c7borg/jLzc6h72/3/

Answer 8

<figcaption>HTML5 এর মধ্যে ট্যাগটি যদি আপনি আপনার চিত্রে পাঠ্য লিখতে অনুমতি দেয়:

<figcaption>
Your text here
</figcaption>.

তারপরে আপনি টেক্সটটি যেখানে ইমেজে থাকা উচিত তা অবস্থান নির্ধারণ করতে CSS ব্যবহার করতে পারেন।

Answer 9

<table>
<tr><td><img ...><td><img ...>
<tr><td>caption1<td>caption2
</table>

পছন্দসই স্টাইল

Comments

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

— মাইক Kormentedy