CODEWITHSUNDEEP
jquerycssimageresponsive-design
kath
kath

Reputation: 195

Full width fixed height Image

How could one make sure that an image is displayed at full width (or fully covering the screen horizontally) with a certain fixed height no matter the width of the screen. If I were to set the width: 100%; and height: auto; obviously the height would fluctuate with the width of the screen. It doesn't matter if the image will only be shown partially if the screen is narrower. Any ideas?

EDIT: Here is a good example: http://www.teamnine.ch

Try re-sizing your browser window to see what I mean.

Upvotes: 1

Views: 6322

Answers (3)

Haseeb Pavaratty
Haseeb Pavaratty

Reputation: 683

I think the above (link) website uses a height of 100vh instead of 100%.

100vh will take the entire height of the window without stretching the image. If you add (for example 50vh), the image will take half of the window. It is somewhat like using percent, but I think, using vh is the right way here.

If you want to make your header like that, try this, 

header {
   background-image: (image.jpg); 
   height: 100vh; 
   background-size: cover;
}

Here is how to center all the elements inside the header in the center (like the link in question), 

header {
    background-image: (image.jpg); 
    height :100vh; 
    background-size: cover; 
    display: flex; 
    flex-direction: column; 
    justify-content: centre; 
    alighn-items: centre; 
}

Upvotes: 2

hjpotter92
hjpotter92

Reputation: 80649

From the source website, it is clear that they have a min-height property set. Hence you're getting the result like that. On your desired page too, try the following CSS for your img tag.

img {
    min-height: 100%;
    min-width: 1400px;
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

Upvotes: 2

Arsenio Santos
Arsenio Santos

Reputation: 1

You could wrap the image in a div:

CSS:

<style type="text/css">
div.outer {
    width:100%;
    height:125px;
    overflow:hidden;
}
img {
    width:100%;
    height:auto;
}
</style>

HTML:

<div class="outer">
    <img src="inner.jpg">
</div>

Upvotes: 0

Related Questions