Dawn - CSS - Size of image

Store Design
, , ,
1

Hi,

I got an image + text block, I would like the image to be 100% visible (no crop when the size of the window changes) and I want this image to be always centered vertically in this block (whatever the size of the window)

Thank you in advance to give me thee correct CSS to add

Thank you

Alex

2

To achieve an image that is always 100% visible, not cropped, and centered vertically within a block regardless of the window size, you can use CSS. Here is an example of how to do this using HTML and CSS:

HTML


    
    
    
    

    
        
        

            

Your text goes here.

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: Arial, sans-serif;
}

.image-text-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh; /* Adjust as needed */
    text-align: center;
    padding: 20px;
}

.responsive-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.text-content {
    margin-top: 20px;
}

  1. HTML Structure:

    • The image and text are wrapped inside a div with the class image-text-block.
    • The image uses the class responsive-image, and the text is in a div with the class text-content.

  2. CSS Styling:

    • The image-text-block class uses Flexbox to center its content both horizontally and vertically.
    • The responsive-image class ensures the image scales to fit the width of its container without exceeding it, maintaining its aspect ratio (no cropping).
    • The text-content class adds a margin to separate the text from the image.
3

@Alex087 So please check the screenshot below for the settings which actually do this for you in dawn theme

cdb840e0-d7f8-42e9-9cbb-552414472784.png
cdb840e0-d7f8-42e9-9cbb-552414472784.png1920Ă—945 257 KB

1 Like
4

Understood, so Desktop content position “middle” worked. But with “adapt to image” my image is still cropped when changing the size of the window.

Thank you

5

Hello @Alex087
Please send a screenshort so we can check
Thanks

6

Hello @Alex087
the screenshort is blank please send me again

1 Like