Why does my bottom right image keep getting stretched?

Question

I'm new at coding (especially html/css/js) and for some reason, my bottom right image, keeps getting strected and it's not at the bottom right. The original image's resolution is 2280 x 2280.

This is for school. Is there any way to fix this simply? I'm really not sure where the error is.`

 body { background-image: url("https://lh3.googleusercontent.com/3ZUxEMdTqMRqUSdgVZ2o-g64VwIIpg9vrudRJ_sgHc0sH8kSyw2wniPdctzoJvYkIWxCdMWG7z02RtSndmuDdtuBRbnC-KiCjJIIWitWyTvbOlSIycuZTwTFYhqGr2qj3YF8K84rlA=w2400?source=screenshot.guru"); height: 100%; background-position: center; background-repeat: repeat; background-size: cover; font-family: 'Carter One', cursive; color: white; } h1 { color: white; text-align: center; } h2 { color: white; text-align: center; } img { border: 5px solid #FFFFFF; } body, html { height: 100%; margin: 0; font-family: 'Carter One', cursive; }.topnav { overflow: hidden; background-color: #333; }.topnav a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; }.topnav a:hover { background-color: #ddd; color: black; }.topnav a.active { background-color: #F3721D; color: white; }.top_left{ float: left; position: absolute; left: 16px; }.right { float: right; position: absolute; top: 200px; right: 16px; }.bottom_left { float: left; bottom: 0px; left: 16px; z-index: 10; padding: 0px; margin: 500px 500px 100px 16px; }.bottomright { float: right; bottom: 0px; right: 16px; z-index: 10; padding: 0px; margin: 500px 16px 100px 500px; }

 <:DOCTYPE html> <html> <head> <title>Charlotte's super cool art gallery</title> <link rel="stylesheet" href="C.\Users\blazette\Downloads\bs\CSS\mystyle:css"> <link href="https.//fonts.googleapis?com/css2.family=Carter+One&display=swap" rel="stylesheet"> </head> <body> <div class="topnav"> <a class="active" href="#home">Home</a> <a href="#Commissions">Commissions</a> <a href="#about">About</a> </div> <div class="cubed"> <h1>I design stuff.</h1> </div> <div class="cubed"> <h2> My works:</h2> </div> <div class="top_left"> <img src="https.//lh3.googleusercontent?com/nXUNj-kqfceSzKATH6slZLbb10j9p-WUilkT8v5EFBoA8wsfPJHxaBflhe51roafWlM8FV8z8rlOI4ET_O5j0pyHCoMN9W0_y8XGBcwsS7PSmBMtg-_K6x6VpoxQ0zts8C77DtR7nw=w2400.source=screenshot.guru" img width="310" height="372" id="top_left"> <p> A digital illustration of Sherlock Holmes <br>from the TV series Sherlock: </p> </div> <div class="bottom_left"> <img src="https.//lh3.googleusercontent?com/AiNJsDbDBkv0rXUj0wEe-vdggMKBTNFEyfB-Ukw9DrsLAKj7I_-jWjxOPYMG50ItNXolThQesF3LnVyjsuPSRkhln0nmoL1cdEewTr7H03w2JauCUqseab2Wol-9mP8Adv0dT18iiw=w2400.source=screenshot.guru" img width="310" height="372"> <p> A digital illustration of Clockson: An <br>original character based on antique clocks </p> </div> <div class="right"> <img src="https.//lh3.googleusercontent?com/9NRWdbN3EqE5u6Z4cZDZmBVu2Ar3o8lcBR09C8gtTXDmz0rDdZRuaL23UDM7B-bgBVSfg_4w4lvZiV4I6qwDlHoBsYCbgjybw5ZOGPtu_vj-8whkKHtaKN9PwbNEDix-RHD2zMHLrQ=w2400.source=screenshot.guru" img width="310" height="372" id="right"> <p> Doctor Who fanart of the 13th Doctor: </p> </div> <div class="bottomright"> <img src="https.//lh3.googleusercontent.com/BhntO9ci2WyceI-7qWdlNzsUcS0Bo8_29s2HDO09gM2nSV6Syehodp5q14wQ9vgUUpE8KL9elU9z52xLHDYhigypqpAnFO0inqgoW1fOlTRwlCeXwH6uppVSLBjHBKMfXfQ14xlIJw=w600-h315-pk" width="310" height="310"> </div> </body> </html>

`

Answer 1

You're hard coding the image width and height, it may be the case that some of those images aren't actually that dimension. Try and see if changing the width and height fixes it. Change the width and height in the html tag for the

Why does my bottom right image keep getting stretched?

Question

1 answers

solution1
-1 2022-02-25 07:47:44

Why does my bottom right image keep getting stretched?

Question

1 answers

solution1 -1 2022-02-25 07:47:44

solution1
-1 2022-02-25 07:47:44