I would like to know how to align an image in the palette of the browser window, so that when I change the size of the window the image remains "leaning" in the bottom corner of the screen, without being cut, follow below my progress with the code , the emoji is to the right of the screen, however when I adjust the width of the browser window the emoji stays there and is hidden. What I'm trying to do is have his position corrected automatically so he's always leaning on the bottom of the window.
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Posicionar um objeto na tela_2</title>
<style type="text/css">
#imgpos {
position:absolute;
left:100%;
top:50%;
}
</style>
</head>
<body>
<p>Para retornar ao tutorial use o botão "Voltar" do seu navegador.</p>
<img src="https://criemoda.files.wordpress.com/2012/08/sorriso.png"width="220" height="220" alt="logo maujor" id="imgpos">
</body>
</html>
In advance thank you for reading and answering!