Vertical centered photos - Post ID...
Is it possible to vertically center photos?
By that I mean to draw an imaginary line horizontally thru the center of a photo, declare a fixed maximum height ( in a column, container or whatever is required) and have the photo expand by bleeding both the top and bottom equally.
...paul
By that I mean to draw an imaginary line horizontally thru the center of a photo, declare a fixed maximum height ( in a column, container or whatever is required) and have the photo expand by bleeding both the top and bottom equally.
...paul
Paul Peters wrote:
Is it possible to vertically center photos?
By that I mean to draw an imaginary line horizontally thru the center of a photo, declare a fixed maximum height ( in a column, container or whatever is required) and have the photo expand by bleeding both the top and bottom equally.
...paul
Is it possible to vertically center photos?
By that I mean to draw an imaginary line horizontally thru the center of a photo, declare a fixed maximum height ( in a column, container or whatever is required) and have the photo expand by bleeding both the top and bottom equally.
...paul
not sure I fully understand the bleeding thing but
place your image in a column/container Which you can set the height or padding etc as you desire whatever, set whatever size you want to set the image to
In the column/container go to the position section in design view,
set the display to = flex
direction = column
wrap = nowrap
justify = either flex start (if you want the image to align to the top of the container) or center (if you want the image to center horizontally in the column/container)
items=center to align the image vertically
Alternative
keep the column/container set to block (whatever width you desire and set the margins for the image left & right to auto
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
If the photo is smaller vertically than the column/container height, the instructions work for centering the photo vertically in the box. A larger photo still stays pinned to the top and doesn't get cropped.
However, what I'm after is for the photo to be larger than the container height (which is static ie. 200 px) and as the viewport gets wider and the photo grows in size, the photo stays centered vertically, clipping equal parts off the top and off the bottom. Example; a sunset would keep the sun/horizon vertically in the center while the sky and foreground would be equally cut off more and more as the photo gets bigger ...
However, what I'm after is for the photo to be larger than the container height (which is static ie. 200 px) and as the viewport gets wider and the photo grows in size, the photo stays centered vertically, clipping equal parts off the top and off the bottom. Example; a sunset would keep the sun/horizon vertically in the center while the sky and foreground would be equally cut off more and more as the photo gets bigger ...
Paul Peters wrote:
If the photo is smaller vertically than the column/container height, the instructions work for centering the photo vertically in the box. A larger photo still stays pinned to the top and doesn't get cropped.
However, what I'm after is for the photo to be larger than the container height (which is static ie. 200 px) and as the viewport gets wider and the photo grows in size, the photo stays centered vertically, clipping equal parts off the top and off the bottom. Example; a sunset would keep the sun/horizon vertically in the center while the sky and foreground would be equally cut off more and more as the photo gets bigger ...
If the photo is smaller vertically than the column/container height, the instructions work for centering the photo vertically in the box. A larger photo still stays pinned to the top and doesn't get cropped.
However, what I'm after is for the photo to be larger than the container height (which is static ie. 200 px) and as the viewport gets wider and the photo grows in size, the photo stays centered vertically, clipping equal parts off the top and off the bottom. Example; a sunset would keep the sun/horizon vertically in the center while the sky and foreground would be equally cut off more and more as the photo gets bigger ...
put it as a background image in the column container (size =contained/custom whatever works
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
Yes ... add it all together - it works (size=cover); container can be height adjusted as necessary at breakpoints ... THX much

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.