Display Two Images Side by Side on an HTML Page

How do I display images side by side(e.g. 2 images in a row and then next row) contained in an array in angular 8?

May try using flexbox

.img-container {

display:flex;

 flex-wrap: wrap;

align-content: space-evenly;

}

.img-container img{

width:50%;

}

<div class="row">

    <div *ngFor="let url of urls" class="col-md-6 img-container”>

        <img [src]="url" alt="Image not found" height="250px" width="350px" (click)="imageClick(url)">

    </div>

</div>

How to lay 2 images side by side in html?

Just add css display:flex to parent container of images in your case figure.

<figure class="half" style="display:flex">

    <img style="width:400px" src="http://alexmarshall12.github.io/assets/img/colored_1693146.png">

    <img style="width:600px" src="http://alexmarshall12.github.io/assets/img/one-piece-1693146_colored2.png">

    <figcaption>Caption describing these two images.</figcaption>

</figure>

Two images, side by side responsive

Here is the solution that I reached. The main issue that I was having was that I had assigned

width:50%

to img instead of the container.

Here are the final(ish) code blocks that are working as intended. Thanks for the suggestions!

<!DOCTYPE html>
<html>

    <head>
        <link rel="stylesheet" href="Stylesheets/default.css">
    </head>

    <body>
        <div class="page">

            <div class="img-wrapper-l">
                <a href="pol.html"><img src="Images/cal-engel-531490-unsplash.jpg"></a>
            </div>

            <div class="img-wrapper-r">
                <a href="biz.html"><img src="Images/rawpixel-660717-unsplash.jpg"></a>
            </div>

            <div class="clear"></div>

        </div>

    </body>

html, body {
    height: 100%;
    margin: 0;
}

#wrapper {
    min-height: 100%; 
}

.page {
    width: 100%;
    max-height: 100vh;
    white-space: nowrap;
    overflow: hidden;
}

.img-wrapper-l {
    height: 100%;
    width: 50%;
    overflow: hidden;
    position: absolute;
    float: left;
}

.img-wrapper-r {
    height: 100%;
    width: 50%;
    overflow: hidden;
    position: relative;
    float: right;
}

img {
    height: auto;
    width: auto;
    max-width: 1200px;
    max-height: 1200px;
}

Align two images side by side

Use white-space: nowrap to prevent wrapping.

.header {

  margin: 0 auto; max-width: 800px; /*centering header*/

  height: 120px; position: relative; /*scale header images to 120px*/

  white-space: nowrap; /*keep one-line*/

  overflow: hidden; /*hide excess images parts on small screens*/

}

.header>img { height: 100%;}

 

<body>

  <div class="header">

  <img src="http://www.www8-hp.com/in/en/images/T-GE-healthcare-logo__153x115--C-tcm188-1616301--CT-tcm188-1237012-32.jpg" alt="CCM Logo">

  <img src="http://blu-alliance.com/wp-content/uploads/2013/10/healthcare-banner2.jpg" alt="CCM Banner">

  </div>

</body>

How To Place Two Images Side By Side In Header

The width of images(.banner and .logo) are bigger than their parent(header) so the .banner goes to the second line. you can reduce the size of .banner(for example 200)

link