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?

Please show what you've tried for the css. – eebbesen Dec 24 '13 at 16:26 — eebbesen, Dec 24 '13 at 16:26

Cilan · Accepted Answer · 2013-12-24T16:23:45.023

20

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.

edited Dec 24 '13 at 16:23

answered Dec 24 '13 at 16:06

Cilan

13,101
3
34
51

Thanx for the quick reply :) But if I use this code I lose the ratio of the image. – Simon Dec 24 '13 at 16:12
@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. – Cilan Dec 24 '13 at 16:18
Thanx, but if you remove the height:50px your height will always change, dependent of the widht of your screen. – Simon Dec 24 '13 at 16:26
@user3132912 So what are you trying to do? Have it the size of their screen once and stop changing? – Cilan Dec 24 '13 at 16:28
I want that the image has the same height on every screen (450px), but always a width of 100%. Without losing ratio. – Simon Dec 24 '13 at 16:31
@user313912 I hate to say this, but that would be impossible unless the image were to crop. – Cilan Dec 24 '13 at 16:32
But thats what i want, on smaller screens the image should be cropped :) – Simon Dec 24 '13 at 16:33
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. – Orville Patterson Dec 24 '13 at 16:34
@user3132912 Then I am sure they used javascript to accomplish it. – Cilan Dec 24 '13 at 16:35
What we are saying is that you have to manually crop the image using a image editing software (eg. Photoshop). – Orville Patterson Dec 24 '13 at 16:36
So there is no way doing it only using css/html ? – Simon Dec 24 '13 at 16:36
@user3132912 Unfortunately, because you have to check the size of the screen and see if it's smaller than, etc. – Cilan Dec 24 '13 at 16:37
Well if you can modify the class in this link then you could do what you want http://cssglobe.com/lab/imagecrop/01.html – Orville Patterson Dec 24 '13 at 16:39
@OrvillePatterson True, but he wants the image to shrink sometimes – Cilan Dec 24 '13 at 16:40
but with css/html thats the closest you are gonna get – Orville Patterson Dec 24 '13 at 16:40
@OrvillePatterson True. – Cilan Dec 24 '13 at 16:41
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. – Orville Patterson Dec 24 '13 at 16:42
@OrvillePatterson PHP or Javascript. – Cilan Dec 24 '13 at 16:43
Yeah but either way its probably better just trying to find a way to work with a static size. – Orville Patterson Dec 24 '13 at 16:43
2

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(...); }` – Simon Dec 24 '13 at 16:50
That doesn't shrink according to the screen-size – Orville Patterson Dec 24 '13 at 16:52
@OrvillePatterson yes it does I've tested it! – Simon Dec 24 '13 at 16:54

score 6 · Answer 2 · edited Jan 16 '20 at 23:01

6

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>

edited Jan 16 '20 at 23:01

Hamza Khanzada

1,439
1
22
39

answered Nov 07 '16 at 09:55

danielpenalverramila

61
1
1

score 4 · Answer 3 · answered Nov 24 '16 at 14:43

4

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

max-height: 200px;
width: auto;

answered Nov 24 '16 at 14:43

Brane

3,257
2
42
53

I'm glad I could help :) – Brane May 22 '17 at 14:59

Orville Patterson · Answer 4 · 2013-12-24T16:30:11.690

3

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.

edited Dec 24 '13 at 16:30

answered Dec 24 '13 at 16:15

Orville Patterson

524
4
20

Then just remove the height property. I saw you made a comment after i had answered. – Orville Patterson Dec 24 '13 at 16:29
how tall is the original image? as in the image itself? – Orville Patterson Dec 24 '13 at 16:32

score 1 · Answer 5 · answered Nov 07 '16 at 10:41

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

indrajeet · Answer 6 · 2020-06-30T15:42:40.837

1

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

edited Jun 30 '20 at 15:42

answered Jun 30 '20 at 15:36

indrajeet

837
10
17

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. – Jason Aller Jun 30 '20 at 20:44
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. – indrajeet Jun 30 '20 at 22:37

score 0 · Answer 7 · edited May 22 '17 at 17:25

0

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.

edited May 22 '17 at 17:25

Badacadabra

8,043
7
28
49

answered Dec 24 '13 at 16:18

Martin42006

63
1
8

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... – Cilan Dec 24 '13 at 16:24
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. – Martin42006 Dec 24 '13 at 16:28

score 0 · Answer 8 · answered Jan 16 '18 at 18:59

0

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

I hope this will serve your purpose.

answered Jan 16 '18 at 18:59

Palak Jain

664
6
19

score 0 · Answer 9 · answered Jan 17 '20 at 00:33

0

you can use pixels or percent.

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

css

#image
{
width:100%;
height:
}

answered Jan 17 '20 at 00:33

Amin Mukhamadiev

1

sorry I forgot to put 40% for the height – Amin Mukhamadiev Jan 17 '20 at 01:04

Full width image with fixed height

9 Answers9