I am putting together a project for a friend of mine and I am using the scrolling page that divides the page into parts. In the first part I am putting a banner and a writing with the logo of my friend.
The problem is that when I put the normal logo, such as 'img src="link"'
in HTML, at the time of the preview I notice that it exits the image and goes to the bottom in background-image
. Although I put it right it is not going and it gets the image cropped.
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 both in CSS and HTML are just the size of the area or space that the image is (as if it were a div), I can not move the size of the image itself. When the size decreases, the image is cropped.
Example with CSS above, image appears cropped:
Chrome code and analysis on the page Code and Analytics
Has anyone ever had a similar problem?
Link: link