Background-size like value for an image in a full width div

Question

When using a full width background image you are able to set the background-size:cover. To make the image fit the screen without losing the quality of the image.

Is there a similar solution for an image?

I am using an image in a full screen div (max height:500px) but when applying the full width to the image the image height is much higher (+1000px) so is there a solution to let this image fit perfectly in the 100% width div with a max height of 500px?

I am now using margin-bottom:-20% but then the image resolution is crap and zoomed in way to much.

.node-type-article .group-header{
    margin: 0 -100% 50px -100%;
    max-height: 500px;
}
.node-type-article .group-header img{
    margin-bottom: -20%;
}
.node-type-article .l-main{
    overflow: visible !important;
}

So any suggestions? Scaling, resizing,...?

Have you tried width: 100%; height: 100%; position: fixed; left: 0; top: 0;? — Justinas
you can set the size of the img in the path after the src - width="auto" height = "500" e.g. — Rachel Gallen
have you tried - img { max-height: 500px; width: 100% } ?? — Rohit Kumar

bbosternak bbosternak · Accepted Answer · 2015-09-07T09:32:37

With this solution the image fits in the 100% width and is cropped to 500px height:

.node-type-article{
    width: 100%;

}
.node-type-article .group-header{
    width: 100%;
    max-height: 500px;
    overflow: hidden;
}
.node-type-article .group-header img{
    width: 100%;

}

Fiddle

Or with this solution the image is also 100% width but it's height is stretched/shrinked to 500px:

.node-type-article{
    width: 100%;

}
.node-type-article .group-header{
    width: 100%;
    height: 500px;
    overflow: hidden;
}
.node-type-article .group-header img{
    width: 100%;
    height: 100%;
}

Fiddle

Or check this pen: http://codepen.io/ErwanHesry/pen/JcvCw

Background-size like value for an image in a full width div

1 Answers