Materialize: Parallax Image scaling for large images.

Created on 14 Apr 2016 · 8Comments · Source: Dogfalo/materialize

I am using a large image (2000 x 1333) with Parallax, but the parallax effect is only showing a small piece of it.

Is there a way to control the scaling of the the Parallax image effect using CSS?

Thanks,

Parallax question

Source

rubendinho

Most helpful comment

Same issue (also 2000x1333).
I fixed it with:

.parallax img {
    @media #{$small-and-down} { max-width: 200%; }
    @media #{$medium-and-up} { width: 100%; }
}

michaelvalette on 29 Apr 2016

👍4

All 8 comments

Can you post a code example? Our parallax tries to maintain the image in its natural resolution. You can tweak the width of the parallax img and the height of the parallax container but then you have to make sure that its dimensions will always fit in the container.

acburst on 17 Apr 2016

Same issue (also 2000x1333).
I fixed it with:

.parallax img {
    @media #{$small-and-down} { max-width: 200%; }
    @media #{$medium-and-up} { width: 100%; }
}

michaelvalette on 29 Apr 2016

👍4

worked like a charm - thanks!

On April 29, 2016 at 7:54:54 AM, ciobamike ([email protected]) wrote:

Same issue, I simply fixed it with :

.parallax img { width: 100%; }

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub

rubendinho on 29 Apr 2016

👍3

Thanks @ciobamike

Cypher1 on 12 Sep 2016

With high-res photos I found this solution (plain CSS):

```
@media only screen and (max-width : 992px) {
.parallax img {
max-height: 130%; /* or a little bit higher */
}
}

@media only screen and (min-width: 993px) {
.parallax img {
max-height: 170%; /* or higher percentages. It's up to your taste */
}
}

GGolov on 12 Apr 2017

👍2 🎉1

@GGolov @ciobamike Thanks!

fega on 6 May 2017

Did you try to add class="responsive-img" to the img tag?

Naterra on 28 Jan 2018

<picture>
    <source media="(min-width: 1680px)" srcset="images/spotlight1-1680.jpg">
    <source media="(min-width: 1280px)" srcset="images/spotlight1-1280.jpg">
    <source media="(min-width: 980px)" srcset="images/spotlight1-980.jpg">
    <source media="(min-width: 736px)" srcset="images/spotlight1-736.jpg">
    <source media="(min-width: 480px)" srcset="images/spotlight1-480.jpg">
    <source media="(min-width: 1px)" srcset="images/spotlight1.jpg">
        <!--fallback-->
        <img src="images/spotlight1.jpg" alt="Fout bij laden" style="width:100%;">
</picture>

While you are at it, imagine you could minimize the used bandwith. Which queries are most compatible with Materialize? Can somebody tell me this?