Full width image with fixed height

Question

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?

Answer 1

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.

Answer 2

If you want to have same ratio you should create a container and hide a part of the image.

.container{
  width:100%;
  height:60px;
  overflow:hidden;
}
.img {
  width:100%;
}

<div class="container">
  <img src="http://placehold.it/100x100" class="img" alt="Our Location" /> 
</div>