Mobile app version of vmapp.org
Login or Join
Deb5748823

: 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

@Deb5748823

Posted in: #Css #Html #WebsiteDesign

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 ?

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Deb5748823

2 Comments

Sorted by latest first Latest Oldest Best

 

@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

10% popularity 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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme