How to create: responsive images

Learn how to use CSS to create responsive images.

Responsive images will automatically adjust to fit the screen size.

Adjust the browser window size to view the responsive effects:

Lights

View effects

How to create responsive images

First step - Add HTML:

<img src="nature.jpg" alt="Nature" class="responsive">

Second step - Add CSS:

If you want the image's responsiveness to be able to both expand and shrink, please set the CSS width attribute set to 100%,height set to auto:

প্রদত্ত উদাহরণ

.responsive {
  width: 100%;
  height: auto;
}

আপনাদের নিজের হাতে পরীক্ষা করুন

যদি আপনি ছবিটি প্রয়োজনের জন্য চূড়ান্ত করতে চান, কিন্তু তা তার মৌলিক মাপের বেশি হয় না, তবে max-width: 100%:

প্রদত্ত উদাহরণ

.responsive {
  max-width: 100%;
  height: auto;
}

আপনাদের নিজের হাতে পরীক্ষা করুন

যদি আপনি প্রতিক্রিয় ছবিকে সর্বোচ্চ মাপ সীমাবদ্ধ করতে চান, তবে max-width প্রতিভাতীত এবং আপনার বেছে নেওয়া পিক্সেল মান:

প্রদত্ত উদাহরণ

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

আপনাদের নিজের হাতে পরীক্ষা করুন

নির্দিষ্ট পৃষ্ঠা

教程：কিভাবে করা যায়: সিএসএস ছবি

教程：CSS 响应式网页设计