فهرست مقاله
با توجه به رونق اینترنت موبایل،بازاریابی ویچتمحبوبیت تلفن های همراه شده استزندگیابزار ضروری
یک وب سایت بسازیدالگو، توصیه می شود از آن استفاده کنیدوردپرستم تطبیقی برای:
- اگر توسعه‌دهنده پوسته وردپرس هنگام طراحی صفحه پوسته وردپرس، صفحه تطبیقی تصویر HTML 5 را به خوبی انجام نداده است...
- با مرور وب سایت در یک دستگاه تلفن همراه، تغییر مکان تصویر بسیار زشتی ایجاد می شود و تجربه کاربر بسیار ضعیف است!
تطبیق تصویر CSS به چه معناست؟
خود انطباق تصویر CSS به ایجاد تصاویر در صفحه وب html از طریق کد CSS اشاره دارد:
- سازگاری خودکار با عرض و ارتفاع دستگاه های مختلف.
- تگ img به طور خودکار به تناسب مقیاس می شود.
بعد،چن ویلیانگمن کد مقیاس بندی متناسب CSS img ^_^ را با شما به اشتراک خواهم گذاشت
کد تطبیقی ارتفاع و عرض تصویر CSS
درج تصویر در html:
اگر می خواهید تصویر به جای ثابت ماندن در عرض و ارتفاع، با اندازه کوچک صفحه نمایش سازگار شود.
می توانید کد زیر را به فایل style.css پوسته وردپرس ▼ اضافه کنید
/*图片自适应宽度和高度*/
img { max-width: 100%; height: auto; width: auto\9; width: auto; }بیانیه اینجاmax-widthقانون حداکثر عرض
- برای اطمینان از اینکه همه تصاویر حداکثر 100٪ نمایش داده می شوند (یعنی فقط می توانند به اندازه تصاویر خودشان نمایش داده شوند).
- در این مرحله، اگر عنصر حاوی تصویر (به عنوان مثال، بدنه یا div حاوی تصویر) کوچکتر از عرض ذاتی تصویر باشد، تصویر برای پر کردن حداکثر فضای موجود، مقیاس بندی می شود.
width:auto;به معنی عرض خودکار
\9 این روشی برای نوشتن css هک است.
- به این ترتیب "\9" به کد معمولی css اضافه می شود، فقط مرورگر IE می تواند آن را تشخیص دهد، سایر مرورگرها این عبارت را نادیده می گیرند.
- این باعث تمایز مرورگر می شود و هدف مرورگرهای سازگار را فعال می کند.
چرا از عرض: 100٪ استفاده نمی کنید؟
برای دستیابی به مقیاس‌بندی خودکار تصاویر، می‌توانید از ویژگی‌های عرضی که بیشتر استفاده می‌شوند، به عنوان مثال استفاده کنید.width：100％.
با این حال، این قانون در اینجا اعمال نمی شود.
- زیرا این قانون باعث می شود که آن را به اندازه ظرفش پهن کند.
- در مواردی که ظرف بسیار وسیعتر از تصویر باشد، تصویر به صورت غیر ضروری کشیده می شود.
注意 事项
انتخابگرهای CSS چیست؟ فرق کلاس و id چیست؟آموزش های زیر در مورد ▼ صحبت می کنند
وب سایت تلفن همراه چگونه ویدیوی MP4 را با صفحه پخش می کند؟لطفا روی لینک زیر کلیک کنید ▼
وبلاگ امید چن ویلیانگ ( https://www.chenweiliang.com/ ) "صفحه وب HTML 5 تصویر تطبیقی صفحه نمایش تصویر کد مقیاس بندی متناسب" را به اشتراک گذاشت که برای شما مفید است.
به اشتراک گذاری لینک این مقاله خوش آمدید:https://www.chenweiliang.com/cwl-964.html
به کانال تلگرام وبلاگ چن ویلیانگ خوش آمدید تا از آخرین به روز رسانی ها مطلع شوید!
📚 این راهنما حاوی ارزش بسیار زیادی است، 🌟این یک فرصت نادر است، آن را از دست ندهید! ⏰⌛💨
اگر دوست داشتید به اشتراک بگذارید و لایک کنید
اشتراک گذاری و لایک های شما انگیزه مستمر ما هستند!