CSS Images

By /

CSS ইমেজ

ছবি যেকোন ওয়েব অ্যাপ্লিকেশনের একটি গুরুত্বপূর্ণ অংশ। একটি ওয়েব অ্যাপ্লিকেশনে প্রচুর ছবি অন্তর্ভুক্ত করা সাধারণত সুপারিশ করা হয় না, তবে ছবিগুলি যেখানে প্রয়োজন সেখানে ব্যবহার করা গুরুত্বপূর্ণ৷ CSS আমাদের ওয়েব অ্যাপ্লিকেশনে ছবি প্রদর্শন নিয়ন্ত্রণ করতে সাহায্য করে।

CSS-এ একটি চিত্রের স্টাইলিং বর্ডার এবং মার্জিন ব্যবহার করে একটি উপাদানের স্টাইলিং অনুরূপ। একাধিক সিএসএস বৈশিষ্ট্য রয়েছে যেমন বর্ডার প্রপার্টি, হাইট প্রপার্টি, প্রস্থ প্রপার্টি ইত্যাদি যা আমাদের একটি ইমেজ স্টাইল করতে সাহায্য করে।

কিছু ইলাস্ট্রেশন ব্যবহার করে CSS-এ ছবির স্টাইলিং নিয়ে আলোচনা করা যাক।

থাম্বনেইল ছবি

সীমানা সম্পত্তি একটি থাম্বনেইল ইমেজ করতে ব্যবহার করা হয়.

উদাহরণ

  1.  >   
  2. <html>   
  3. <head>   
  4.     <style>   
  5. img{  
  6. border: 2px solid red;  
  7. border-radius:5px;  
  8. padding:10px;  
  9. }  
  10. h2{  
  11. color:red;  
  12. }  
  13.     style>   
  14. head>   
  15.     
  16. <body>  
  17.  <h1>Thumbnail Imageh1>  
  18. <img src=“jtp.png”>img>  
  19. <h2>Welcome to javaTpointh2>  
  20. body>   
  21. html>  

স্বচ্ছ ইমেজ

একটি ছবিকে স্বচ্ছ করতে, আমাদের অপাসিটি বৈশিষ্ট্য ব্যবহার করতে হবে। এই সম্পত্তির মান যথাক্রমে 0.0 থেকে 1.0 এর মধ্যে রয়েছে।

উদাহরণ

  1. >   
  2. <html>   
  3. <head>   
  4.     <style>   
  5. img{  
  6. border: 2px solid red;  
  7. border-radius:5px;  
  8. padding:10px;  
  9. opacity:0.3;  
  10. }  
  11. h2{  
  12. color:red;  
  13. }  
  14.     style>   
  15. head>   
  16.     
  17. <body>  
  18.  <h1>Transparent Imageh1>  
  19. <img src=“jtp.png”>img>  
  20. <h2>Welcome to javaTpointh2>  
  21. body>  
  22. html> 

গোলাকার ছবি

সীমানা-ব্যাসার্ধ বৈশিষ্ট্য সীমানাযুক্ত চিত্রের ব্যাসার্ধ সেট করে। এটি বৃত্তাকার ছবি তৈরি করতে ব্যবহৃত হয়। বৃত্তাকার কোণগুলির সম্ভাব্য মানগুলি নিম্নরূপ দেওয়া হয়েছে:

  • border-radius: It sets all of the four border-radius property.
  • border-top-right-radius: It sets the border of the top-right corner.
  • border-top-left-radius: It sets the border of the top-left corner.
  • border-bottom-right-radius: It sets the border of the bottom-right corner.
  • border-bottom-left-radius: It sets the border of the bottom-left corner.

উদাহরণ

  1.  >   
  2. <html>   
  3. <head>   
  4.     <style>   
  5. #img1{  
  6. border: 2px solid green;  
  7. border-radius:10px;  
  8. padding:5px;  
  9. }  
  10. #img2{  
  11. border: 2px solid green;  
  12. border-radius:50%;  
  13. padding:5px;  
  14. }  
  15.   
  16. h2{  
  17. color:red;  
  18. }  
  19.     style>   
  20. head>   
  21.     
  22. <body>  
  23.  <h1>Rounded Imageh1>  
  24. <img src=“jtp.png” id=“img1”>img>  
  25. <h2>Welcome to javaTpointh2>  
  26.   
  27.  <h1>Circle Imageh1>  
  28. <img src=“jtp.png” id=“img2”>img>  
  29. <h2>Welcome to javaTpointh2>  
  30. body>   
  31. html>  

প্রতিক্রিয়াশীল ইমেজ

এটি স্বয়ংক্রিয়ভাবে স্ক্রিনের আকারে ফিট করার জন্য সামঞ্জস্য করে। এটি স্বয়ংক্রিয়ভাবে নির্দিষ্ট বাক্সে ইমেজ সামঞ্জস্য করতে ব্যবহৃত হয়।

উদাহরণ

  1. >   
  2. <html>   
  3. <head>   
  4.     <style>   
  5. #img1{  
  6. max-width:100%;  
  7. height:auto;  
  8. }  
  9. h2{  
  10. color:red;  
  11. }  
  12.     style>   
  13. head>   
  14.     
  15. <body>  
  16.  <h1>Responsive imageh1>  
  17.  <h2>You can resize the browser to see the effecth2>  
  18. <img src=“jtp.png” id=“img1” width=“1000” height=“300”>img>  
  19. <h2>Welcome to javaTpointh2>  
  20. body>   
  21. html>  

একটি চিত্র কেন্দ্রে

আমরা বাম-মার্জিন এবং ডান-মার্জিন বৈশিষ্ট্য ব্যবহার করে একটি চিত্রকে কেন্দ্র করতে পারি। একটি ব্লক উপাদান তৈরি করার জন্য আমাদের এই বৈশিষ্ট্যগুলি অটোতে সেট করতে হবে।

উদাহরণ

  1. >   
  2. <html>   
  3. <head>   
  4.     <style>   
  5. #img1{  
  6. margin-left:auto;  
  7. margin-right:auto;  
  8. display:block;  
  9. }  
  10. h1,h2{  
  11. text-align:center;  
  12. }  
  13.     style>   
  14. head>   
  15.     
  16. <body>  
  17.  <h1>Center imageh1>  
  18. <img src=“jtp.png” id=“img1”>img>  
  19. <h2>Welcome to javaTpointh2>  
  20. body>   
  21. html>  


Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top