Menu
Is there a way of making a background fit a div "height" while keeping his ratio ? Like a contain but for "y" only ? according to this answer there isn't Background Image Scaling While Maintaining Aspect Ratio however considering that the most voted answer quoted some css3 possiblities I was wondering if there was a way nowdays to do so in css3 or maybe javascript ?
629
If the background-size is contain or cover : While preserving its intrinsic proportions, the image is rendered at the largest size contained within, or covering, the background positioning area. If the image has no intrinsic proportions, then it's rendered at the size of the background positioning area.
The background-position-y CSS property sets the initial vertical position for each background image. The position is relative to the position layer set by background-origin .
Pretty sure background-size: cover; means the image will fill the element while maintaining its aspect ratio, while background-size: 100%; will just make the image fill 100% width of the element.
The best website background image size is 1920 x 1080 pixels, according to Malama Online Marketing, and the ideal ratio is 16:9.
Just set the height to 100% and the width to auto:
.foo {
background-size: auto 100%;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
