htmlcssimagewidthcover

Full width image with fixed height

I'm trying to create an image looking like the cover image here, using only css and html. I've tried different things but nothing has worked so far.

This is my html code:

<div id="container">
    <img id="image" src="...">
</div>

What css code should I use?

Solution

  • Set the image's width to 100%, and the image's height will adjust itself:

    <img style="width:100%;" id="image" src="...">

    If you have a custom CSS, then:

    HTML:

    <img id="image" src="...">

    CSS: 

    #image
{
    width: 100%;
}

    Also, you could do File -> View Source next time, or maybe Google.