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. Custom row height + row image background

Custom row height + row image background

Scheduled Pinned Locked Moved General Discussion
14 Posts 4 Posters 319 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.
  • O Offline
    O Offline
    oxfir
    wrote on last edited by
    #4

    how can i change this properties, what should i add, to always fit my image height into the row, without cropping the height or streching the image. (width can be cropped).

    thank you in andvance!

    P 1 Reply Last reply
    0
    • O oxfir

      how can i change this properties, what should i add, to always fit my image height into the row, without cropping the height or streching the image. (width can be cropped).

      thank you in andvance!

      P Offline
      P Offline
      pavloradich
      wrote on last edited by
      #5

      @oxfir +1
      Would like to know the same exact thing!

      1 Reply Last reply
      0
      • P Offline
        P Offline
        pavloradich
        wrote on last edited by
        #6

        @arminunruh please, just let us place the image in the row that is taking full browser height (without cropping the height) and stays proportional to the width.

        1 Reply Last reply
        0
        • arminunruhA Offline
          arminunruhA Offline
          arminunruh
          Global Moderator
          wrote on last edited by
          #7

          in gridder: right click on row - enter html class/id → as class enter: "contain"

          Screenshot 2024-07-23 at 12.26.02.png

          Enter the custom css in "lay options" -> "custom css & html"

          .contain img{
          object-fit: contain!important;
          }
          

          this will result in the background image not getting cut off, but the image will be shown like this:

          Screenshot 2024-07-23 at 12.28.58.png

          1 Reply Last reply
          0
          • arminunruhA Offline
            arminunruhA Offline
            arminunruh
            Global Moderator
            wrote on last edited by arminunruh
            #8

            but after i think about it more, thats probably not what you want. :O

            enter the class "full-height" in gridder: right click on row - enter html class/id
            (without " ")

            then css:

            .full-height img{
            width: auto!important;
            height: 100%!important;
            object-fit: none!important;
            left: 50%!important;
            transform: translateX(-50%)!important;
            }
            
            P 1 Reply Last reply
            0
            • arminunruhA Offline
              arminunruhA Offline
              arminunruh
              Global Moderator
              wrote on last edited by
              #9

              this will not fill out the whole row in some cases

              1 Reply Last reply
              0
              • arminunruhA arminunruh referenced this topic on
              • arminunruhA arminunruh

                but after i think about it more, thats probably not what you want. :O

                enter the class "full-height" in gridder: right click on row - enter html class/id
                (without " ")

                then css:

                .full-height img{
                width: auto!important;
                height: 100%!important;
                object-fit: none!important;
                left: 50%!important;
                transform: translateX(-50%)!important;
                }
                
                P Offline
                P Offline
                pavloradich
                wrote on last edited by
                #10

                @arminunruh thank you!!! what makes you think that "contain" option is not what we want? I think it works perfectly and looks exactly how we wanted.

                1 Reply Last reply
                0
                • arminunruhA Offline
                  arminunruhA Offline
                  arminunruh
                  Global Moderator
                  wrote on last edited by
                  #11

                  oh ok!

                  with contain, there can also be gaps at the top and bottom.
                  i thought you only wanted gaps at the left and right

                  P 1 Reply Last reply
                  0
                  • arminunruhA arminunruh

                    oh ok!

                    with contain, there can also be gaps at the top and bottom.
                    i thought you only wanted gaps at the left and right

                    P Offline
                    P Offline
                    pavloradich
                    wrote on last edited by
                    #12

                    @arminunruh thank you, any idea how to contain two or three images in one "browser height" row as well?

                    When they're like this: ■ ■ ■

                    1 Reply Last reply
                    0
                    • arminunruhA Offline
                      arminunruhA Offline
                      arminunruh
                      Global Moderator
                      wrote on last edited by
                      #13

                      +more → +html

                      in the gridder.
                      then insert:

                      <div style="display: flex; gap: 10px; position: absolute; width: 100%; height: 100svh; justify-content: center;">
                          <img style="height: 100svh;" src="https://upload.wikimedia.org/wikipedia/commons/9/90/Sanborn_Fire_Insurance_Map_from_Salem%2C_Essex_County%2C_Massachusetts%2C_1957%2C_Plate_0060.jpg" lazy/>
                          <img style="height: 100svh;" src="https://upload.wikimedia.org/wikipedia/commons/9/90/Sanborn_Fire_Insurance_Map_from_Salem%2C_Essex_County%2C_Massachusetts%2C_1957%2C_Plate_0060.jpg" lazy/>
                          <img style="height: 100svh;" src="https://upload.wikimedia.org/wikipedia/commons/9/90/Sanborn_Fire_Insurance_Map_from_Salem%2C_Essex_County%2C_Massachusetts%2C_1957%2C_Plate_0060.jpg" lazy/>
                      </div>
                      

                      make sure you size that html element to span the whole width like here:

                      Screenshot 2024-07-25 at 19.25.04.png

                      and make sure you use "right click -> browser height" on that row

                      1 Reply Last reply
                      0
                      • arminunruhA Offline
                        arminunruhA Offline
                        arminunruh
                        Global Moderator
                        wrote on last edited by
                        #14

                        this will probably cut off the left and right image a lot!

                        this is what it looks like for me with 3 portrait images:

                        Screenshot 2024-07-25 at 19.29.03.png

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