CODEWITHSUNDEEP
htmlcss
smanhoff
smanhoff

Reputation: 466

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

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,...?

Upvotes: 0

Views: 172

Answers (1)

bbosternak
bbosternak

Reputation: 357

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

Upvotes: 2

Related Questions