রেসপন্সিভ ইমেজ গ্যালারি তৈরির পূর্ণ উদাহরণ
CSS মিডিয়া কোয়েরি এবং ফ্লেক্সবক্স/ফ্লোট ব্যবহার করে রেসপন্সিভ ইমেজ গ্যালারি তৈরি করা যায়। নিচে একটি সম্পূর্ণ উদাহরণ দেওয়া হলো:
উদাহরণ
<!DOCTYPE html> <html> <head> <style> div.myGallery { border: 2px solid orange; } div.myGallery:hover { border: 1px solid blue; } div.myGallery img { width: 100%; height: auto; } div.desc { padding: 20px; text-align: center; } .responsive { padding: 0 5px; float: left; width: 24.99999%; } @media only screen and (max-width: 700px) { .responsive { width: 49.99999%; margin: 5px 0; } } @media only screen and (max-width: 500px) { .responsive { width: 100%; } } .clearfix:after { content: ""; display: table; clear: both; } </style> </head> <body> <div class = "responsive"> <div class = "myGallery"> <a target = "_blank" href="https://www.tutorialspoint.com/assets/videotutorials/courses/3d_animation_online_training/380_course_211_image.jpg"> <img src = "https://www.tutorialspoint.com/assets/videotutorials/courses/3d_animation_online_training/380_course_211_image.jpg" alt="3D Animation Tutorial" width="600" height="500"> </a> <div class = "mydiv">3D Animation Tutorial></div> </div> </div> <div class = "responsive"> <div class = "myGallery"> <a target = "_blank" href = "https://www.tutorialspoint.com/assets/videotutorials/courses/swift_4_online_training/380_course_210_image.jpg"> <img src = "https://www.tutorialspoint.com/assets/videotutorials/courses/swift_4_online_training/380_course_210_image.jpg" alt="Swift Video Tutorial" width="600" height="500"> </a> <div class = "mydiv">Swift Video Tutorial</div> </div> </div> <div class = "responsive"> <div class = "myGallery"> <a target = "_blank" href = "https://www.tutorialspoint.com/assets/videotutorials/courses/css_online_training/380_course_215_image.jpg"> <img src = "https://www.tutorialspoint.com/assets/videotutorials/courses/css_online_training/380_course_215_image.jpg" alt="CSS Video Tutorial" width="600" height="500"> </a> <div class="mydiv">CSS Tutorial</div> </div> </div> <div class = "clearfix"></div> </body> </html>
ব্যাখ্যা: .responsive ক্লাসে float: left এবং প্রারম্ভিকلى ২৫% প্রস্থ দেওয়া হয়েছে। মিডিয়া কোয়েরি দিয়ে ৭০০পিক্সেলের নিচে ৫০% এবং ৫০০পিক্সেলের নিচে ১০০% প্রস্থ সেট করা হয়েছে। .clearfix ফ্লোট ক্লিয়ার করে।
