Title: Adjust images with different dimensions side by side with css in Jupyter
Tags: html;css;image;jupyter;jupyter-lab
Question: I'm trying to put two images side-by-side in a markdown cell in Jupyter. But the two images have different dimensions and I can't get them to be exactly the same size.
My goal is that the images have the same proportions regardless of their size. In the image that I put here you can see that the "fig 2" lacks height to match in size with the "fig 1".
![Images side by side][(https://imgur.com/af9Xr3V)
Below I put the CSS and HTML code that I have used to put images side by side.
box-sizing: border-box;
.column {
float: left;
width: 50%;
height: auto;
padding: 3px;
text-align: center;
background-position: 50% 50%;
background-repeat: no-repeat;
object-fit: fill;
overflow: hidden;
vertical-align: top;
/* Clearfix (clear floats) */
.row75b5:f2c1:f5d7:b954:8dc3:cee9:baf:a8c0ter {
content: "";
clear: both;
display: table;
<div class="column"&gt;
<a id="fig1" href="./../../Images/r-project.png"&gt;
<img src="https://imgur.com/opaKw3b" alt="R-Proyect" style="width:100px height:100px"/&gt;
</a&gt;
<figcaption&gt;Fig 1</figcaption&gt;
</div&gt;
<div class="column"&gt;
<a id="fig2" href="./../../Images/cran.png"&gt;
<img src="https://imgur.com/iYnTl8H" alt="CRAN" style="width:50% height:100px"&gt;
</a&gt;
<figcaption&gt;Fig 2</figcaption&gt;
</div&gt;
I hope you can help me with that little problem. Thanks.
Comment: The image may be of different height too ? What do you want in the remaining portion ?

Comment: You want the image division to elongate if the height doesnt match ? and fig 1 and fig 2 to appear at the same height ? is that it ?

Comment: @XxSTREKxX I just want them to have the same width and height and be shown side by side

Here is the accepted answer: If your images are of different height and width and you want the image to elongate its height you need to mention the height of the image.
box-sizing: border-box;
.column {
float: left;
width: 50%;
height: 500px;
padding: 3px;
text-align: center;
background-position: 50% 50%;
overflow: hidden;
vertical-align: top;
height:400px;
/* Clearfix (clear floats) */
.row75b5:f2c1:f5d7:b954:8dc3:cee9:baf:a8c0ter {
content: "";
clear: both;
display: table;
<div class="column"&gt;
<a id="fig1" href="./../../Images/r-project.png"&gt;
<img src="https://dummyimage.com/600x400/000/fff" alt="R-Proyect" /&gt;
</a&gt;
<figcaption&gt;Fig 1</figcaption&gt;
</div&gt;
<div class="column"&gt;
<a id="fig2" href="./../../Images/cran.png"&gt;
<img src="https://dummyimage.com/400x200/f00/f0f" alt="CRAN"&gt;
</a&gt;
<figcaption&gt;Fig 2</figcaption&gt;
</div&gt;
If you do not want the image to elongate but the text at the bottom to be at the right space try this
.parent {
display: flex;
.child {
display: flex;
text-align: center;
width: 300px;
flex-direction: column;
.imgholder {
height: 400px;
width:100%;
background-size:cover 50% 50%;
background-repeat:no-repeat;
<div class="parent"&gt;
<div class="child"&gt;
<div style="background-image:url(https://dummyimage.com/200x400/2222e6/fff)" class="imgholder"&gt;
</div&gt;
<p&gt;Fig1</p&gt;
</div&gt;
<div class="child"&gt;
<div style="background-image:url(https://dummyimage.com/300x200/122666/fff)" class="imgholder"&gt;
</div&gt;
<p&gt;Fig2</p&gt;
</div&gt;
</div&gt;
I hope this is what you are looking for


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 3, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2019:00:08/24/19', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<html><css><image><jupyter><jupyter-lab>', 'Title': 'Adjust images with different dimensions side by side with css in Jupyter', 'ViewCount': 55, 'id': 57635374, 'user_AboutMe': None, 'user_AccountId': 12009477.0, 'user_DisplayName': 'Rodrigo López ', 'user_Reputation': 363.0, 'user_Views': 12.0, 'user_id': 11014533.0}}