Full width image with fixed height

user_3132912 0
Viewed 184072

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?

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

I hope this will serve your purpose.

user_84949710

you can use pixels or percent.

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

css

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