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>

   

Answer 3

In order not to scratch the image you will need to use:

max-height: 200px;
width: auto;

Answer 4

This can done several ways. I usually do it from my class.

From class

.image
{
    width:100%;


}

and for this your html would be:

<img class="image" src="images/image_name">

or if you want to style it using inline styling then you would just have:

<img style="width:100%; height:60px" id="image" src="images/image_name">

I however recommend doing it from your external style-sheet because as your project grows you will realize that the entire thing is easier managed with separate files for your html and your css.

Answer 5

Set the height of the parent element, and give that the width. Then use a background image with the rule "background-size: cover"

    .parent {
       background-image: url(../img/team/bgteam.jpg);
       background-repeat: no-repeat;
       background-position: center center;
       -webkit-background-size: cover;
       background-size: cover;
    }

Answer 6

If you don't want to lose the ratio of your image, then don't bother with height:300px; and just use width:100%;.

If the image is too large, then you will have to crop it using an image editor.

Answer 7

<div id="container">
    <img style="width: 100%; height: 40%;" id="image" src="...">
</div>

I hope this will serve your purpose.

Answer 8

you can use pixels or percent.

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

css

#image
{
width:100%;
height:
}

Answer 9

#image {
  width: 100%;
  height: 100px; //static
  object-fit: cover;
}