رفتن به مطلب

مشکل ابعاد تصاویر شاخص در حالت رسپانسیو


پست های پیشنهاد شده

با سلام خدمت تمامی اساتید محترم.

من دارم یک سایتی رو رسپانسیو می کنم، خدا رو شکر تقریبا همه ی کاراش هم با موفقیت انجام شده، فقط یک مشکل برام پیش اومده اونم این که بنده تصاویر هر پست رو به صورت inline طول و عرض دادم، اونم به خاطر این که چند جا خونده بودم اگه ابعاد هر تصویر مشخص شده باشه مرورگر با سرعت بیشتری وب سایت رو بارگذاری می کنه مخصوصا خود سایت gtmetrix که این مساله جز موارد نمره دهیش به سایت ها وجود داره، به عنوان مثال تصویر شاخص هر پست من کدش به این حالته:

<img src="img2.jpg" alt="something" width="500" height="340">

حالا من مشکلم اینجاست که وقتی @media screen رو قرار می دم، همه چیز رو تنظیم می کنم تا در نمایشگرهای کوچک فقط ستون مطالب نمایش داده بشه تا زمانی که عرض پنجره بیشتر از عرض تصویر شاخص هست هیچ مشکلی پیش نمیاد، اما اگه رزولوشون پنجره کمتر از 500 باشه ( برای این مثال که در بالا عرض کردم می گم ) کاربر مجبور میشه پنجره رو به صورت افقی اسکرول کنه و دیگه اون حالت رسپانسیو بودن و زیباییش رو از دست میده .

برای حل این مشکل تنها راهی که به ذهنم رسید این بود که یه همچین کدی بنویسم :


@media screen and (max-width: 700px) {
.media img{ width:70%; }
}

و به ستون مطالب کلاس media رو اضافه کنم تا در صورت کوچک بودن پنجره، ابعاد عکس ها هم کوچک بشن و در واقع عرض اون ها برابر بشه با 70% ، اما این کد نتونست این کار رو بکنه.

خواهش می کنم اگه راه حلی به ذهنتان می رسه من رو راهنمایی کنید، در ضمن تا حد امکان میخوام با مدیا کوئری سایت رو رسپانسیو کنم نه با بوت استرپ و فریم ورک.

پیشاپیش ممنون.

لینک به ارسال

سلام

ابعاد تصویر شاخص معمولا ثابت هست. پس همه چیز تحت کنترل طراح هست و جای نگرانی نیست. همون طور که قاسم جان گفتند آدرس آنلاین بزارید دقیق راهنمایی کنیم.

لینک به ارسال

احتیاج نیست که با استفاده از این روش تصاویر شاخص خودتون رو اندازه ثابت بهش بدید میتونید از طریق توابع تصاویر بند انگشتی وردپرس عکس های خودتون رو کروپ یا برش بدید تا هم حجمشون پایین بیاد هم اندازه مورد نظرتون اعمال بشه .


if ( function_exists('add_theme_support') ) {
add_theme_support('post-thumbnails');

add_image_size( 'wp-thumb', 150, 120, true);

}

لینک به ارسال

من همیشه سعی میکنم از چیزایی وجود داره استفاده کنم بهترین روش ، 960.gs و bootstrap ، البته فقط پیشنهاده ربطی به موضوع نداره ، اما بدون مشکل کارت حل میشه

لینک به ارسال

بازم سلام، شرمنده یه مدت نبودم برای همین عذر میخوام به خاطر تاخیرم در پاسخ به اظهار لطف شما دوستان عزیز.

اول از همه عرض کنم خدمتتون که من در این سایتم از وردپرس استفاده نمی کنم و فقط به خاطر درک بهتر موضوع از اصطلاح تصویر شاخص استفاده کردم، اما در مورد نسخه ی آنلاین هم که فرموده بودید می تونید به لینک زیر مراجعه کنید:

شکرگزاری

بعد از لود شدن صفحه می تونید به صورت دستی عرض پنجره ی مرورگرتون رو کوچیک کنید، همان طور که ملاحظه خواهید کرد با کوچیکتر کردن پنجره ستون های کناری حذف میشن و در نهایت تنها ستون مطلب باقی می مونه اما اگه همین طور به کم کردن عرض پنجره ادامه بدید بعد از میزان حدود 650 پیکسل، به دلیل وجود تصویر نوار اسکرول پایین ظاهر میشه.

مشکل من همینه که میخوام با وجود این که در هر تصویر به صورت این لاین عرض مشخص شده، با کوچیکتر کردن پنجره یا در حقیقت هنگام مشاهده ی سایت در موبایل هایی که نمایشگرشون رزولوشن پایینی داره ( به عنوان مثال 480.800 پیسکل ) تصویر شاخص کوچیک بشه و نیازی به اسکرول کردن افقی نباشه.

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...