I would like to know if there is a cross-browser method, aligning the image in the center, vertically and horizontally, using Flex, for example, so that the picture was 4: 3 or 3: 4 and always in the center, and the image was not stretched in both cases. Thank!

    1 answer 1

    I did not fully understand what was required, but did align the image in the center here, explain if something is wrong

    body{ margin: 0; } .Aligner { display: flex; align-items: center; min-height: 100vh; justify-content: center; } .Aligner-item--fixed { max-width: 100%; } 
     <div class="Aligner"> <div class="Aligner-item Aligner-item--fixed"> <img src="http://lorempixel.com/200/150/cats/" alt=""> </div> </div>

    • one
      Dances with flex: 1; and flex: none; Not needed. Remove these rules altogether. - VenZell
    • There are a lot of redundant elements in the code that are not related to the essence of the question; this complicates understanding and is misleading. - Alexey Prokopenko