Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Image with fixed height and responsive width

Image with fixed height and responsive width

Scheduled Pinned Locked Moved General Discussion
14 Posts 2 Posters 3.1k Views
  • 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 Offline
    J Offline
    jw
    wrote on last edited by
    #1

    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
    0
    • mariusjopenM Offline
      mariusjopenM Offline
      mariusjopen
      Global Moderator
      wrote on last edited by
      #2

      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
      0
      • J Offline
        J Offline
        jw
        wrote on last edited by
        #3

        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
        0
        • mariusjopenM Offline
          mariusjopenM Offline
          mariusjopen
          Global Moderator
          wrote on last edited by
          #4

          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
          0
          • J Offline
            J Offline
            jw
            wrote on last edited by jw
            #5

            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
            0
            • mariusjopenM Offline
              mariusjopenM Offline
              mariusjopen
              Global Moderator
              wrote on last edited by
              #6

              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
              0
              • J Offline
                J Offline
                jw
                wrote on last edited by
                #7

                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
                0
                • mariusjopenM Offline
                  mariusjopenM Offline
                  mariusjopen
                  Global Moderator
                  wrote on last edited by
                  #8

                  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
                  0
                  • J Offline
                    J Offline
                    jw
                    wrote on last edited by
                    #9

                    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
                    0
                    • mariusjopenM Offline
                      mariusjopenM Offline
                      mariusjopen
                      Global Moderator
                      wrote on last edited by
                      #10

                      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
                      0
                      • J Offline
                        J Offline
                        jw
                        wrote on last edited by
                        #11

                        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
                        0
                        • mariusjopenM Offline
                          mariusjopenM Offline
                          mariusjopen
                          Global Moderator
                          wrote on last edited by
                          #12

                          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
                          0
                          • J Offline
                            J Offline
                            jw
                            wrote on last edited by
                            #13

                            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
                            0
                            • mariusjopenM Offline
                              mariusjopenM Offline
                              mariusjopen
                              Global Moderator
                              wrote on last edited by
                              #14

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

                              Best!

                              Marius

                              www.mariusjopen.world

                              1 Reply Last reply
                              0
                              Reply
                              • Reply as topic
                              Log in to reply
                              • Oldest to Newest
                              • Newest to Oldest
                              • Most Votes


                              I also code custom websites or custom Lay features.
                              💿 Email me here: 💿
                              info@laytheme.com

                              Before you post:
                              1. When using a WordPress Cache plugin, disable it or clear your cache.
                              2. Update Lay Theme and all Lay Theme Addons
                              3. Disable all Plugins
                              4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                              This often solves issues you might run into

                              When you post:
                              1. Post a link to where the problem is
                              2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                              3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                              Online Users
                              Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                              laytheme.com
                              • Login

                              • Don't have an account? Register

                              • Login or register to search.
                              • First post
                                Last post
                              0
                              • Recent
                              • Tags
                              • Popular
                              • Users
                              • Search