0

I'm trying to add an image to the top of my website. For some reason, when I add it, the image is cropped along its sides. It looks cropped when i "Open in Default Browser" using VS Studio Code with Google Chrome and Firefox. It looks this way in jsfiddle aswell. Sorry if this isn't the right place to be asking this!
How can I add an image to the top of the page while retaining its original full image?

Jsfiddle

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body class="body">
<img class="topimage" src="https://i.ibb.co/JyfCDZs/sampleimage.png" alt="portfolio-top-image2">
    <p>Livyatan is an extinct genus of macroraptorial sperm whale containing one species: L. melvillei. The genus name
        was
        inspired by the biblical sea monster Leviathan, and the species name by Herman Melville, the author of the
        famous novel
        Moby Dick about a white bull sperm whale. It is mainly known from the Pisco Formation of Peru during the
        Tortonian stage
        of the Miocene epoch, about 9.9–8.9 million years ago (mya); however, finds of isolated teeth from other
        locations such
        as Chile, Argentina, South Africa, and Australia imply that either it or a close relative survived into the
        Pliocene,
        around 5 mya, and was present throughout the Southern Hemisphere. It was a member of a group of hypercarnivorous
        macroraptorial sperm whales (or "raptorial sperm whales") and was probably an apex predator, preying on whales,
        seals,
        and so forth. Characteristically of raptorial sperm whales, Livyatan had functional, enamel-coated teeth on the
        upper
        and lower jaws, as well as several features suitable for hunting large prey.</p>
    <p>HTML itself isn't whitespace-sensitive.</p>

</body>

</html>  


.body {
    text-align: center;
    background-color: rgb(172, 172, 172);
}

https://jsfiddle.net/e3tbg07v/1/

enter image description here

Google Chrome

enter image description here

Firefox

enter image description here

vsync
  • 118,978
  • 58
  • 307
  • 400
JuniorNotDev
  • 1
  • 1
  • 1
    Have a look at this post and see if it helps https://stackoverflow.com/questions/15685666/changing-image-sizes-proportionally-using-css – aysob_ay212 Oct 24 '21 at 23:03
  • It is not cropped when I look at it (Windows 10 Edge/Chrome) running either your fiddle or the code you have given direct in my browser. – A Haworth Oct 25 '21 at 11:41
  • Any idea on why it's happening on my end with multiple browsers? – JuniorNotDev Oct 25 '21 at 20:24
  • The img has a class top-image. This has no associated CSS in the fiddle or the code you give, but is it set in your environment somehow (unlikely) but what CSS do you see on your browser dev tools inspect facility? And what OS are you using? I don’t see cropping on either Windows 10 or IOS. – A Haworth Oct 26 '21 at 03:43
  • Looking at the result you put in the comment to @alimustafa answer I see that the width of the img is the same as the smaller img as shown in your question’s images (using the text beneath as measure) so it seems as if something in your environment is setting a default width for an img. – A Haworth Oct 26 '21 at 03:52
  • @A Haworth I'm running Windows 10 Pro. I think you're on to something though. After resetting my computer the problem went away on its own but it comes back randomly. I'm guessing it's one of my other programs so im slowly narrowing it down. Thank you very much for the help! – JuniorNotDev Oct 26 '21 at 19:45

1 Answers1

0
.topimage{
  height: 300px;
  width: 100%;
         }

You can use this to resize your image manually. The reason why your image is appearing as if clipped is that its original resolution is low. The screen's resolution is greater than the image's resolution and that is why it is appearing clipped. Try to use an image that is 1300px and see what happens.

Ali Mustafa
  • 676
  • 3
  • 14
  • I changed the image to a 1300px one and here is the result: https://i.imgur.com/dO75WC1.png here is the link to the 1300px image: https://i.ibb.co/C575DLt/sampleimage-nontransparent1300px.png – JuniorNotDev Oct 25 '21 at 01:54
  • This is how the mage shows on my browser. Link:https://imgur.com/FYJexBD – Ali Mustafa Oct 25 '21 at 09:41