Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Image with fixed height and responsive width

    General Discussion
    2
    14
    2038
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • J
      jw last edited by

      I would like to have an image cover all columns of my page but keep a fixed height across all screen widths. Since the aspect ratio will naturally change, the image should be cropped to the final size and not stretched.

      I tried to create a class with height: 150px and width: 100% but that wasn‘t successful (and would also stretch the image too, right?)

      For reference: I‘m talking about the picture on www.spandau20.com/dates

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        Dear @jw
        have a look into this:
        https://www.w3schools.com/css/css3_object-fit.asp

        You need to play around with the CUSTOM CSS.

        Hope I could help!

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • J
          jw last edited by

          Hi Marius,
          Thanks for your reply! I tried the object-fit: cover property but it is apparently an „Unknown property“.

          Also, the class doesn‘t seem to be applied to the image. Looking at the source code, there is a div around the image which receives the properties of the class „banner“. The image is placed into a stack element but I made sure to select the image for the custom class. Use „s20“ to access the pages.

          Julius

          1 Reply Last reply Reply Quote 0
          • mariusjopen
            mariusjopen Global Moderator last edited by

            Dear @jw
            the message unknown property can be ignored. It still works.
            Don't forget to use !important to overwrite the settings from Lay:
            https://css-tricks.com/when-using-important-is-the-right-choice/

            If you have still trouble, the best is to post a link to your website that I can have a look.

            Best!

            Marius

            www.mariusjopen.world

            1 Reply Last reply Reply Quote 0
            • J
              jw last edited by jw

              Hi Marius,

              Unfortunately I am still struggling with this. Could you please give spandau20.com/subscribe a look?
              The image banner should have a height of 150px and cover the full width (-20% left and right).

              On the Dates page you can see the image I want to crop to the final size. The table underneath is positioned as if the banner was 150px high, but the banner image isn't cropped at all :(

              Best
              Julius

              1 Reply Last reply Reply Quote 0
              • mariusjopen
                mariusjopen Global Moderator last edited by

                Dear @jw

                The image is trapped in the container:
                0_1550071092552_Bildschirmfoto 2019-02-13 um 13.17.47.png

                But you can drag images out of the gridder, into the pink area.

                Best!

                Marius

                www.mariusjopen.world

                1 Reply Last reply Reply Quote 0
                • J
                  jw last edited by

                  Hey Marius,

                  not sure if I undestand. I tried dragging the image into the top frame area, that didn't work.

                  Best
                  Julius

                  1 Reply Last reply Reply Quote 0
                  • mariusjopen
                    mariusjopen Global Moderator last edited by

                    Dear @jw
                    have a look here:
                    0_1550259310009_Bildschirmfoto 2019-02-15 um 17.35.00.png

                    Best!

                    Marius

                    www.mariusjopen.world

                    1 Reply Last reply Reply Quote 0
                    • J
                      jw last edited by

                      Hi Marius,

                      I tried dragging the image to the left which worked but didn't yield the effect I was aiming for. (See www.spandau20.com/dates)

                      Maybe my aims were a bit unclear: The banner on the subscribe page looks great with only one problem: I want the height to remain at the same px value across all screen sizes. The width is correct.

                      I made a quick sketch in Ps of how I want this to look across two screen sizes:
                      0_1550305623531_lay.jpg

                      Best
                      Julius

                      1 Reply Last reply Reply Quote 0
                      • mariusjopen
                        mariusjopen Global Moderator last edited by

                        Dear @jw
                        ok. I understand. you can use CUSTOM CSS to change the height.

                        Also look into:

                        • !important
                        • object-fit

                        Best!

                        Marius

                        www.mariusjopen.world

                        1 Reply Last reply Reply Quote 0
                        • J
                          jw last edited by

                          That's what I tried but it didn't work.

                          These are the classes that the banner image has:
                          0_1550696771639_Bildschirmfoto 2019-02-20 um 22.05.03.png

                          1 Reply Last reply Reply Quote 0
                          • mariusjopen
                            mariusjopen Global Moderator last edited by

                            Dear @jw

                            try this:

                            .banner img {
                                height: 100%;
                                object-fit: cover;
                            }
                            .banner div {
                                height: 100%;
                            }
                            
                            

                            Hope that works!

                            Best!

                            Marius

                            www.mariusjopen.world

                            1 Reply Last reply Reply Quote 0
                            • J
                              jw last edited by

                              Hi Marius,

                              That didn't work either but I managed to work it out using a HTML object:

                              <img src="wp-content/uploads/2019/02/banner_03.jpg" alt="Banner" class="banner">

                              The CSS class:

                              .banner{
                              position: relative;
                              padding-top: 125px;
                              height: 125px !important;
                              object-fit: cover !important;
                              }

                              Thanks for your help!
                              Julius

                              1 Reply Last reply Reply Quote 0
                              • mariusjopen
                                mariusjopen Global Moderator last edited by

                                Dear @jw
                                great! Thank you for letting us know!

                                Best!

                                Marius

                                www.mariusjopen.world

                                1 Reply Last reply Reply Quote 0
                                • First post
                                  Last post

                                Before you post

                                Use the Search Feature. Maybe there is already a solution to your issue.

                                1. Update Lay Theme and all Lay Theme Addons
                                2. Disable all Plugins
                                3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                                4. Now see if your problem solved itself
                                5. Go here, see if your problem is listed here:
                                Troubleshooting

                                When you post:
                                1. Post a link to where the problem is
                                2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                                Thanks!

                                Online Users

                                Recent Topics

                                • S

                                  Theme crashed - because of Polylang?

                                • J

                                  Split Screen just on front page / subpages without the split?

                                • Y

                                  image quality dropped

                                laytheme.com