Scaling and centering image of varying dimensions, with right-aligned text in CSS

Question

I'm trying to create a page where the image is on the left and the caption (the text) is on the right, and the image/text combo together centered on the page. The challenge I'm facing is that the image could be any size or aspect ratio. I need the image as big as possible (while still fitting in the screen without the user having to scroll). The image height can be determined using javascript (I'm using Angular). I've sketched out the three scenarios here:

The image could be in portrait orientation (height > width), landscape orientation (width > height), or a panoramic image (width > height, and width is abnormally wide). Some considerations for all three cases:

1. The caption/text should be fixed width (say 300px), and should be placed to the right of the image (and it should be visible, the user shouldn't have to scroll horizontally).
2. Image should be sized as big as possible--the height should be just less than the screen height (so no scroll bars). In the case of a panorama image, the height will be much less than the screen height, otherwise the text container will get pushed off the screen.
3. The image and text combo should be centered on the screen.

Hopefully, the sketch should clarify what I am trying to communicate here.

I am able to get the image and text side by side, but am not able to center them in all three scenarios.

<div class="right-side">
    {{ caption }} 
</div>

<div class="left-side">
    <img [src]="imageUrl">
</div>

.left-side {
    float: none; 
    width: auto;
    overflow: hidden;
    text-align: center;

    img {
        margin: 40px;
        margin-right: 0;
        max-height: 80vh; 
        max-width: 80vw;
    }
}

.right-side {
    width: 400px;
    padding: 10px 40px;
    float: right;
    font-size: 16px;
}

Answer 1

CSS Flexbox has more cross-browser support over the CSS Grid system, here is an example with CSS object-fit used for image purposes only!

 * { margin: 0; padding: 0; box-sizing: border-box; } .container { width: 70%; display: block; margin-top: 5%; margin-left: auto; margin-right: auto; } .article-container { display: flex; justify-content: space-between; } .left-side { flex-grow: 1; } .left-side img { width: 100%; height: 85vh; object-fit: cover; -o-object-fit: cover; } .right-side { width: 300px; margin-left: 30px; }

 <div class="container"> <div class="article-container"> <div class="left-side"> <img src="https://i.imgur.com/ZwaMNmO.jpg" alt="" /> </div> <div class="right-side"> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint magni voluptas laboriosam. Unde, est eos? </p> </div> </div> </div>

Answer 2

let me explain my approach which for my understanding solves your requirement. First I declared left side and then declared right side in the HTML. I decided then to use flex for creating your grid and then making the image both responsive to landscape and portrait images. I'm assuming that your container will have a fixed width, but if you remove that static width it will work anyway (and you will have no need to add the margin: 0 auto; property).

I hope this solves your question and encourages you to use the power of flex!

 .left-side { text-align: center; } .left-side img { display: block; max-width: 100%; max-height: 90vh; width: auto; height: auto; } .right-side { padding: 10px; width: 300px; flex: 0 0 300px; } .container { max-width: 1200px; display: flex; justify-content: center; margin: 0 auto; }

 <div class="container"> <div class="left-side"> <img src="https://via.placeholder.com/500x1200"> </div> <div class="right-side"> {{ caption }} </div> </div>

Answer 3

I'll go from my comment into an answer since it seems to be close to your needs .

grid could be used to center and reorder things at screen.

example :

 .body { display: grid; grid-template-columns: repeat(2, minmax(auto, max-content)); justify-content: center; grid-auto-flow: row dense; grid-gap: 1em; gap: 1em; } .right-side { grid-column: 2; max-width: 300px; } .left-side {} .left-side img { margin: 0 0 auto auto;/* will put at top right of its grid area */ max-width: calc(100vw - 300px - 4em); } /* only for demo/possible way to break things into a single column*/ @media screen and (max-width: 500px) { .body { display: block; } .left-side img { margin: 0 0 auto auto; max-width: 90vw; } .right-side { max-width: 90vw; } }

 <div class="body"> <div class="right-side"> <h1>HTML Ipsum Presents</h1> <p> <strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis. </p> <h2>Header Level 2</h2> </div> <div class="left-side"> <img src="http://dummyimage.com/200x400" /> </div> </div> <div class="body"> <div class="right-side"> <h1>HTML Ipsum Presents</h1> <p> <strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis. </p> <h2>Header Level 2</h2> </div> <div class="left-side"> <img src="http://dummyimage.com/800x400" /> </div> </div> <div class="body"> <div class="right-side"> <h1>HTML Ipsum Presents</h1> <p> <strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis. </p> <h2>Header Level 2</h2> </div> <div class="left-side"> <img src="http://dummyimage.com/1400x600" /> </div> </div>

pen to play with : https://codepen.io/gc-nomade/details/RwNXNRB