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?

Daube

Please show what you've tried for the css. – Acis

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.

Avaunt

Thanx for the quick reply :) But if I use this code I lose the ratio of the image. – Daube

@user3132912 Also, i made a slight coding bug, I changed .image to #image, so use #image. Also, the height will auto-adjust, I hope this will fix your problem. – Avaunt

Thanx, but if you remove the height:50px your height will always change, dependent of the widht of your screen. – Daube

@user3132912 So what are you trying to do? Have it the size of their screen once and stop changing? – Avaunt

I want that the image has the same height on every screen (450px), but always a width of 100%. Without losing ratio. – Daube

@user313912 I hate to say this, but that would be impossible unless the image were to crop. – Avaunt

But thats what i want, on smaller screens the image should be cropped :) – Daube

I was thinking the same thing man of snow.. the image itself has to be made to 450px if you want to keep it there and have a consistent ratio. – Deirdra

@user3132912 Then I am sure they used javascript to accomplish it. – Avaunt

What we are saying is that you have to manually crop the image using a image editing software (eg. Photoshop). – Deirdra

So there is no way doing it only using css/html ? – Daube

@user3132912 Unfortunately, because you have to check the size of the screen and see if it's smaller than, etc. – Avaunt

Well if you can modify the class in this link then you could do what you want cssglobe.com/lab/imagecrop/01.html – Deirdra

@OrvillePatterson True, but he wants the image to shrink sometimes – Avaunt

but with css/html thats the closest you are gonna get – Deirdra

@OrvillePatterson True. – Avaunt

well he has a lot of work to do then because he is gonna have to then write multiple classes and apply them after first using php to detect the screen size. – Deirdra

@OrvillePatterson PHP or Javascript. – Avaunt

Yeah but either way its probably better just trying to find a way to work with a static size. – Deirdra

Thanx guys but I found it :D #container { background-image: url(../img/team/bgteam.jpg); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; background-size: cover; padding-top: 450px; background-image: url(...); } – Daube

That doesn't shrink according to the screen-size – Deirdra

@OrvillePatterson yes it does I've tested it! – Daube

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>

   

Satiable

Answer 3

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

max-height: 200px;
width: auto;

Slavin

I'm glad I could help :) – Slavin

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.

Deirdra

Then just remove the height property. I saw you made a comment after i had answered. – Deirdra

how tall is the original image? as in the image itself? – Deirdra

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;
    }

Depreciation

Answer 6

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

Shererd

When answering a six year old question with eight existing answers it is important to point out what new aspect of the question your answer addresses, and perhaps noting if any of the techniques you use were introduced since the question was asked.. Also code only answers can generally be improved by explaining how and why they work. – Ruckus

thank you for pointing out well I had the same problem today in ionic and none of the above solutions work for me. So I fixed my using above code. And I don't want to apply any styles to parent div. None of the answers use object-fit: cover; so I thought to share here. – Shererd

Answer 7

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.

Partida

It is not just okay to look at a comment from an answer I edited and then edited so it shows this answer, just in hope that you will get the check mark... – Avaunt

sorry when i started writing this your comment wasn't there. i would have added a comment but i cant as i don't yet have 50 rep. i wasn't trying to take credit for someone work. – Partida

Answer 8

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

I hope this will serve your purpose.

Necessarian

Answer 9

you can use pixels or percent.

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

css

#image
{
width:100%;
height:
}

Binominal

sorry I forgot to put 40% for the height – Binominal