تغییر اندازه تصاویر با تغییر اندازه مرورگر
با استفاده از خاصیت width و تنظیم آن به درصد و خاصیت height به صورت auto، تصاویر به صورت واکنش‌گرا خواهند بود و با تغییر اندازه صفحه بزرگ و کوچک می‌شوند:
مثال:
img {
width: 100%;
height: auto;
}در این مثال، تصویر ممکن است بزرگتر از اندازه اصلی‌اش شود. راه‌حل بهتر این است که از خاصیت max-width استفاده کنیم تا تصویر فقط در صورت نیاز کوچک شود ولی بزرگتر از اندازه اصلی خود نشود.
استفاده از خاصیت max-width
با تنظیم max-width به ۱۰۰٪، تصویر در صورت نیاز کوچک می‌شود ولی هرگز بزرگتر از اندازه اصلی خود نخواهد شد:
مثال:
img {
max-width: 100%;
height: auto;
}افزودن تصویر به صفحه وب
مثال:
img {
width: 100%;
height: auto;
}تصاویر پس‌زمینه
تصاویر پس‌زمینه
تصاویر پس‌زمینه نیز می‌توانند با تغییر اندازه واکنش نشان دهند.
سه روش برای مدیریت تصاویر پس‌زمینه:
- استفاده از
background-size: contain: تصویر پس‌زمینه به گونه‌ای مقیاس می‌شود که داخل ناحیه محتوا جای گیرد ولی نسبت ابعاد خود را حفظ کند.
مثال:
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}- استفاده از
background-size: 100% 100%: تصویر پس‌زمینه به گونه‌ای کشیده می‌شود که کل ناحیه محتوا را پوشش دهد.
مثال:
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}- استفاده از
background-size: cover: تصویر به گونه‌ای تنظیم می‌شود که کل ناحیه محتوا را پوشش دهد، اما نسبت ابعاد تصویر حفظ می‌شود و ممکن است بخشی از تصویر برش بخورد.
مثال:
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}تصاویر مختلف برای دستگاه‌های مختلف
برای بهینه‌سازی بارگذاری و جلوگیری از نمایش تصاویر بزرگ در دستگاه‌های کوچک، می‌توانید از کوئری‌های رسانه‌ای استفاده کنید تا تصاویر مختلف در دستگاه‌های مختلف نمایش داده شوند.
مثال:
/* برای عرض کمتر از ۴۰۰ پیکسل */
body {
background-image: url('img_smallflower.jpg');
}
/* برای عرض ۴۰۰ پیکسل و بیشتر */
@media only screen and (min-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}عنصر HTML
عنصر <picture> به توسعه‌دهندگان امکان می‌دهد که برای طراحی‌های واکنش‌گرا تصاویر مختلفی را ارائه دهند. این عنصر به شما اجازه می‌دهد منابع مختلفی برای تصویر تعریف کنید و اولین منبعی که با شرایط مطابقت دارد، انتخاب می‌شود.
مثال:
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers">
</picture>ویژگی srcset ضروری است و منبع تصویر را تعریف می‌کند. ویژگی media اختیاری است و کوئری‌های رسانه‌ای مانند CSS را قبول می‌کند.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام