malina
5 سال پیش توسط malina مطرح شد
4 پاسخ

تصاویر رسپانسیو

سلام
دوستان یه مشکل کوچیک سر در گمم کرده هر کاری می کنم عکس های سایت در حالت موبایل کوچک نمیشه(کامل نمیشه.یعنی از عرض موبایل بیشتر نشون میده)کلاس رسپانسیو که میذارمم فرق نمی کنه


ثبت پرسش جدید
سینا شاه‌اویسی
تخصص : برنامه نویس فرانت اند
@sinashahoveisi 5 سال پیش مطرح شد
0

از bootstrap استفاده کنید با کد زیر :

<img src="..." class="img-fluid" alt="Responsive image">

اگر مشکل حل نشد html و css رو بذارید تا ببینیم مشکل کجاست


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش مطرح شد
0

در کل معمولا این کد جواب میده:

img-res {
max-width: 100%;
height: auto;
}

ولی شما کدتون رو قرار بدین تا ببینیم مشکل چی می تونه باشه.


محمد مهدی
@MohammadMahdi 5 سال پیش مطرح شد
0

@malinacortova
ترتیب اندازه های media query رو رعایت کردید؟

@media (min-width: 576px) {
    .login_img{
        width: 200px;
    }
}
@media (min-width: 768px) {
    .login_img{
        width: 300px;
    }
}
@media (min-width: 992px) {
    .login_img{
        width: 400px;
    }
}
@media (min-width: 1200px) {
    .login_img{
        width: 500px;
    }
}

مثلا اول از کوچکترین مدیا چک کنه بیاد به اندازه های بزرگ.


malina
@malinacortova 5 سال پیش مطرح شد
0

از قالب آماده استفاده کردم جالبش اینجاست که در کامپایلار یه کد دیگه است وقتی ران میکنی رو مرورگر کد ها کلا فرق می کنند.آدم سردرگم میکنه!!
این کد کامپایلر:

 <img src="{{asset($slides->photo->path)}}" alt="" data-bgposition="bottom bottom"
                                             data-bgfit="cover" data-bgrepeat="no-repeat" class="img-fluid"
                                             data-no-retina>

این کدم رو وقتی ران میشه در مرورگر میده که css انلاین هستش

<div class="tp-bgimg defaultimg " data-bgcolor="undefined" style="background-repeat: no-repeat; background-image: url(&quot;http://127.0.0.1:8000/photo/1584389481online.jpg&quot;); background-size: cover; width: 100%; height: 100%; opacity: 1; z-index: 20; visibility: inherit; position: inherit; transform: matrix(1, 0, 0, 1, 0, 0);" src="http://127.0.0.1:8000/photo/1584389481oe.jpg"></div>

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام