رفتن به مطلب

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


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

سلام دوستان

ارتفاع عکس ها در سایتم به درستی نمایش داده نمی شود

 

در حالت نمایشگر بزرگ ، به صورت زیر است (درست نمایش می دهد) :

23837149933523138278_pic1.png

 

در حالت نمایشگر بزرگ و موبایل به صورت زیر هست و ارتفاع عکس ها رو کامل نشون نمیده و مشکل داره :

 

33202149933522515263_pic3.png

 

27149933539024844_pic2.png

 

 

به نظر شما مشکل از کجاست ؟

آدرس سایت

لینک به ارسال

lمی تونید شرط بزارید از یه سایز به بعد

#demo .item img, #demo2 .item img, #demo3 .item img, #demo4 .item img{
height:auto!important;}

 

لینک به ارسال
در 1 ساعت قبل، site گفته است :

سلام دوستان

ارتفاع عکس ها در سایتم به درستی نمایش داده نمی شود

 

در حالت نمایشگر بزرگ ، به صورت زیر است (درست نمایش می دهد) :

23837149933523138278_pic1.png

 

در حالت نمایشگر بزرگ و موبایل به صورت زیر هست و ارتفاع عکس ها رو کامل نشون نمیده و مشکل داره :

 

33202149933522515263_pic3.png

 

27149933539024844_pic2.png

 

 

به نظر شما مشکل از کجاست ؟

آدرس سایت

سلام

کلاس تصاویر رو به شکل زیر در فایل استایل استفاده کنید و مقدار دلخواه ارتفاع رو تنظیم کنید

@media screen and (max-width: 480px) {

  .img class {

    height: auto;
  }

}

عرض رو که 480 هست میتونید برای رزولوشن های مختلف تنظیم کنید و کد رو تکرار کنید(با رزولوشن های متفاوت و دلخواه)

img class هم همینطوری نوشتم (شما باید کلاس مربوط به تصاویر اون بخش رو قرار بدید)

لینک به ارسال
در 2 ساعت قبل، Mirrajabi گفته است :

lمی تونید شرط بزارید از یه سایز به بعد


#demo .item img, #demo2 .item img, #demo3 .item img, #demo4 .item img{
height:auto!important;}

 

سلام

این کار رو کرده بودم دیروز و ارتفاع درست شده بود ، اما یکم نامنظم شده بود

عکس :

http://up.vbiran.ir/uploads/2460614993459968135_aks11.png

 

ویرایش شده توسط site
لینک به ارسال
در ۱ ساعت قبل، logomaster گفته است :

سلام

کلاس تصاویر رو به شکل زیر در فایل استایل استفاده کنید و مقدار دلخواه ارتفاع رو تنظیم کنید

@media screen and (max-width: 480px) {

  .img class {

    height: auto;
  }

}

عرض رو که 480 هست میتونید برای رزولوشن های مختلف تنظیم کنید و کد رو تکرار کنید(با رزولوشن های متفاوت و دلخواه)

img class هم همینطوری نوشتم (شما باید کلاس مربوط به تصاویر اون بخش رو قرار بدید)

سلام و متشکر

تست میکنم و نتیجه را اعلام میکنم

سایت من با بوت استرپ رسپانسیو شده ، با کد media تداخل نداره ؟

 

بعد ، مشکل اینجاست که وقتی ارتفاع روی auto قرار میگیره ، عکس ها یکم نامنظم میشن

 

یعنی یکی از عکس ها ارتفاعش مثلا 230 هست ، اون یکی 235 هست

ویرایش شده توسط site
لینک به ارسال
در 22 دقیقه قبل، site گفته است :

سلام و متشکر

تست میکنم و نتیجه را اعلام میکنم

سایت من با بوت استرپ رسپانسیو شده ، با کد media تداخل نداره ؟

 

بعد ، مشکل اینجاست که وقتی ارتفاع روی auto قرار میگیره ، عکس ها یکم نامنظم میشن

 

یعنی یکی از عکس ها ارتفاعش مثلا 230 هست ، اون یکی 235 هست

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

@media هم بعید میدونم با بوت استرپ تداخل داشته باشه 

ویرایش شده توسط logomaster
لینک به ارسال
  • 3 هفته بعد...
در در 7/6/2017 at 17:55، logomaster گفته است :

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

@media هم بعید میدونم با بوت استرپ تداخل داشته باشه 

سلام

ببخشید ، میخواهم برای هر 4 حالت مختلف نمایشگر ، ارتفاع را اندازه های مختلف بزارم

 

برای @media باید چیکار کنم ؟ چیزی مثل between داره ؟

لینک به ارسال
در 32 دقیقه قبل، site گفته است :

سلام

ببخشید ، میخواهم برای هر 4 حالت مختلف نمایشگر ، ارتفاع را اندازه های مختلف بزارم

 

برای @media باید چیکار کنم ؟ چیزی مثل between داره ؟

سلام

برای اینکار میتونید فقط از min-width استفاده کنید.

مثلا شما میخواید از یه رزولوشن به بعد اندازه تغییر کنه ( به عنوان مثال میخواید از رزولوشن 1024 ، تصویر اندازه ی 200px داشته باشه تا رزولوشن 750) خب برای این شما باید کد رو به این صورت قرار بدید

@media screen and (min-width: 1024px){
.class name {
width : 200px;
}}

با کد بالا ، تا اندازه ی 1024 سایز تصویر شما 200px هستش. ینی از اندازه های بزرگتر تا 1024 .

خب حالا  شما از 1024 به بعد باید به صورت زیر کد بدید

@media screen and (min-width: 750px){
.class name {
width : 300px;
  }}

کد بالا از رزولوشن 1024 تا 750 سایز 300 رو برای عرض تصاویر نمایش میده (در صورت وجود کد اول)

خب همین کار رو باید تا هر رزولوشنی که خواستید انجام بدید.

پ.ن : شاید نیاز داشته باشید که بیشتر از 4 اندازه رو کد بدید. مثلا از 1280 تا 1100 ، از 1100 تا 999 ، از 999 تا 850 ، از 850 تا 750 به همین ترتیب. این بستگی به نحوه ی نمایش تصاویر شما در رزولوشن های مختلف داره

ویرایش شده توسط logomaster
لینک به ارسال

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

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

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

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

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

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

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

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

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