I have a slider on my page with the property background cover applied so it fits the whole thing. The slider also has a 50vh fixed height. The background always ends up cutting things from the image that I don't want. How should I go about choosing the right width x height knowing that the website will be seen in very different devices ?
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
viewportmeta 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
widthproperty to size your elements: stick with relative values, such as 100% , 75% etc.
media queriesto prevent your banner on looking too large on big screens.
You can read more about responsive web design here
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.