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

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

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

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

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

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

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

@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;
    }
}

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

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

 <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>