The presence of the image (without container) is not stretched

Question

I would like my image to not stretch and no scrollbars. Therefore, when the browser window shrinks, the image is still the same size (but the overflow is hidden).

<img src="http://nybbledesigns.com/images/header.jpg"/> 

JsFiddle: http://jsfiddle.net/6ppL9axc/

I found solutions with containers, but I need a solution without it.

Any idea?

Answer 1

Try:

 img { position: fixed; overflow: auto; } 

 <img src="http://nybbledesigns.com/images/header.jpg"/> 

Answer 2

I made a background option, hope this can help.

 <div></div> div { width:100%;height:60vh; background-image:url("http://nybbledesigns.com/images/header.jpg"); background-repeat:no-repeat; 

}

The vh value is relative to the height of the screen of the device, so 60vh will be 60% relative to the height of the screen at any time, no matter which device :)

Answer 3

Try

 html, body { max-width: 100%; overflow-x: hidden; } 

It will disable scrollbars forever ~

Answer 4

try this img {max-width:100%;}

Answer 5

This can be done using the new CSS property object-fit ( Currently only a web kit works, but it will be supported in other browsers soon )

Just install object-fit: cover; width img width max and fixed height.

This is basically equivalent to applying background-size:cover to the background image, except that here we apply it to the img element.

Fiddle

 body { margin: 0; } img { object-fit: cover; max-width: 100%; height: 513px; } 

 <img src="http://nybbledesigns.com/images/header.jpg" />