images right next to each other in HTML-CodePudding

I have this HTML file whןch suppose to duplicate an image and put it right next to the original. so you get the same image twice, sort of connected it does'nt work for some reason: duplicate

<html>
    <body>
    <img src="https://images.unsplash.com/photo-1648852071390-7a17e3f2580a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"><img src="https://images.unsplash.com/photo-1648852071390-7a17e3f2580a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80">
    </body>
</html>

thank you I was expecting an image to duplicate but it does not work

CodePudding user response：

It does work. As Victor Svensson mentioned the comments, one way you could fix this is by setting a max width for the images.

img {
  max-width: 50%;
}

<html>
    <body>
    <img src="https://images.unsplash.com/photo-1648852071390-7a17e3f2580a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"><img src="https://images.unsplash.com/photo-1648852071390-7a17e3f2580a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80">
    </body>
</html>

CodePudding user response：

My answer can be a bit unrelated to your case, but still, it works as you described.

Add a CSS rule float: left which puts all the elements just right next to each other. The image you're using is too big, so you might consider specifying the width of the photo by adding one more rule called width: and the value you need.

You can add those rules in three ways: by adding them in the style attribute

<img style="float: left; width: 480px;" src="...">

or by creating a <style> tag in your HTML code

<html>
    <head>
    <style>
        .my-imgs {
            float: left;
            width: 480px;
        }
    </style>
    </head>
    <body>
    <img  src="...">
    </body>
</html>

or by creating a CSS-file, linking it to your HTML

Your HTML file:

<html>
    <head>
    <link rel="stylesheet" href="styles.css"/>
    </head>
    <body>
    <img  src="...">
    </body>
</html>

Your CSS file (styles.css in this case, placed in the same folder as your html file)

.my-imgs {
   float: left;
   width: 480px;
}