: How do I go about choosing image height on a background-cover div? I have a slider on my page with the property background cover applied so it fits the whole thing. The slider also has a

@Fox8063795

First of all, if your website is going to be seen in lot of different devices, you should use relative width on the elements. You're setting the heighton your slider, so it'll obey that rule, making some of the banner to be cropped off to prevent image distortion.


Use the viewport meta tag to set the width of the body element to be the same as your device width. <meta name="viewport" content="width=device-width, inicial-scale=1"> this will help you with some other resposive problems.
Use the width property to size your elements: stick with relative values, such as 100% , 75% etc.
Create media queries to prevent your banner on looking too large on big screens.


You can read more about responsive web design here

Vote Up Vote Down

@Sarah814

You have a slider with height 50vh (50% of viewport height) thus whenever the screen size changes the slider size will change, thus it will be difficult to adjust a raster(png, jpg) image that will keep the same aspect ratio everywhere.
The options are either you make the height of the slider fixed and then choose an image according to that height or use some vector based images in slider.

Vote Up Vote Down