Add "vw" units for column and image element

vantrinh duong

• December 28, 2022 11:39
• Edited

I use Brizycloud for a lot of landing pages. While using Brizy to create landing pages I have some problems. Image, custom height column will have unexpected scale. For example, I have 3 columns containing 3 photos. I usually set the image width to 100% and the height to 300px (appropriate value) for all 3 images. Everything looks great, however when opening on a Computer with a larger or smaller screen size, the aspect ratio will change. The screen is larger than the image will be rectangular. If viewed on a smaller screen, they become square. I wish brizy use "vw" units for the image, custom height for colums. Set image width 100% and height 20vw (example). The aspect ratio does not change much for different screen sizes. I suggest adding vw units to all elements (along with "px" and "%")

 

-------

Right now I need to crop and make the images the same size and set the height to 100%. If I have this function, I don't have to waste time cropping multiple images of the same size.

0

• 

  KC George

  • December 30, 2022 04:27

  Hi Vantrinh,

  You have mentioned that 

  I wish brizy use "vw" units for the image, custom height for colums. Set image width 100% and height 20vw (example). The aspect ratio does not change much for different screen sizes.

  Can you develop a test page with and without vw units and prove this concept on a Brizy page? Please use custom CSS to override the % value with vw units. 

  If your suggested solution works, we will add a request for this.

  0
• 

  vantrinh duong

  • December 31, 2022 05:49
  • Edited

  Maybe I'm a bit wrong.
  But this is what I need. I use the "vw" unit for the column height.

  https://jmp.sh/wYkayP16

  test: https://pagedemo.brizy.site/test2-2

  0
• 

  KC George

  • January 03, 2023 04:28
  • Edited

  Hi Vantrinh,

  If the purpose is to retain the aspect ratio, what about placing the images using the image element as in this page? https://digital-works.brizy.site/image

   

  0
• 

  vantrinh duong

  • January 03, 2023 10:48

  I'm wrong. The image in the brizy scales to the width of the parent element.

  when setting 1 image as column background. (The column contains contents). Now, The height can only be changed in "px". Column height will be fixed on any size screen.
  I can add css to make them work as I want them to. But if you guys add "vw" to column element, it's great

  0
• 

  KC George

  • January 04, 2023 10:23

  Hi Vantrinh,

  You are right, the aspect ratio changes for images in the column background based on the screen size. Thanks for reporting this. We will add a request for this. 

  0

Please sign in to leave a comment.