Image in src goes to background-image and does not resize

Question

I’m putting together a project for a friend of mine and I’m using the scrollfullpage that splits the page into parts. In the first part I’m putting a banner and a written with my friend’s logo.

The problem is that when I put the normal logo, like 'img src="link"' in HTML, at the time of visualization I notice that it leaves the image and goes to the background in background-image. Although I put it right is not going and it gets the image cut.

HTML:

<img id="logo" src="assets/img/logo.png">

CSS:

#logo {
 width: 300;
 height: 180px;
}

But the sizes (width and height) that I can move so much in CSS when HTML is just the size of the area or space the image is in (as if it were a div), I can’t move the size of the image itself. When I decrease the size the image is cropped.

Example with CSS above, image appears cropped:

In red, parts that are missing

Chrome code and scan on top of page Code and Analyze

Has anyone ever had a similar problem ?

Link: https://carioca.creativecode.art.br/

Answer 1

this alone is not possible, unless you are using a javascript code to make this conversion, surely there is on your site a code similar to this:

about date:url: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

function getBase64Image(img) {
    // Create an empty canvas element
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    // Get the data-URL formatted image
    // Firefox supports PNG and JPEG. You could check img.src to
    // guess the original format, but be aware the using "image/jpg"
    // will re-encode the image.
    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

what happens there is that it takes the original image and saves in your browser a recoded copy (Base64), so do not need to load the image whenever the user access the site, is a good optimization method(see the documentation to better understand, the encoded file can get larger than the original if done in the wrong way), also serves to not take the image of your site and stay using in another, consuming the bandwidth of your server, with reservations, of course, an advanced user could find the corresponding image poking through the console, but it is difficult for most since they cannot use the data:url elsewhere.

Formatting data:[<mediatype>][;base64],<data>

data:image is a local and temporary path, so much so that you can access directly through the browser without using http(s), of course, will give an error page, because the path is not relative.

"Note: Data Urls are treated as opaque origins unique to modern browsers, rather than inheriting the origin of the settings object responsible for navigating."

this explains how it ended up in background-image, just remove this code or "library" that you included on the site and clear the cache, will return to normal then.

in relation to the size of the image, you cannot change the size for a matter of hierarchy, the values have somehow already been declared in css(the right is to remove from there), you can force it to render with the values you want using: <img src="" style="width:300px !important;">

ACCORDING TO MOZILA’S DOCUMENTATION

data Uris:

Uris defined by RFC 2397, allow content creators to embed small files embedded in documents.

Base64 coding schemes are commonly used when there is a need to encode binary data that needs to be stored and transferred by media designed to handle text data. This is to ensure that the data remains intact without modification during transport. Base64 is commonly used in various applications, including email via MIME and complex XML data storage .

In Javascript, there are two functions, respectively, for decoding and encoding Base64 strings :

• atob()
• btoa()

The atob() function decodes a sequence of data that was encoded using the base 64 encoding. On the other hand, the btoa() function creates an ASCII sequence encoded in base 64 from a "sequence" of binary data.

Answer 2

First look is missing 'px' in CSS own width. But as you explained even putting the image path in src "it automatically goes to BACKGROUND-IMAGE", then you have two possible solutions for this:

1#

img#logo{
  height: auto;
  width: 100%;
  object-fit: cover;
}

2#

img#logo {
   background-size: cover
}

Answer 3

Put it in percentage to see if it works. Example:

#logo {
 width: 60%;
 height: 50%;
}

Remember to test the sizes there, it won’t necessarily be 100% or 50%.