1

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 ?

  • Reading the docs should help. But given there's no code to help debug and it's not clear what you want, we can't really help you. Questions like this would probably fit better on StackOverflow anyway – Zach Saucier Aug 17 '17 at 12:55
  • 1
    Figure out the max height it will ever display on the largest screen (from 800-1200 px) and make your image that height x 4 times as wide. (so h1000px x w4000px). Forget about controlling exact content or borders on the image. It needs to be a large general field with best stuff in center top. Expect it to get cropped a lot, always centered with fixed top. Phones will only see a narrow middle top section. Big screens will see the whole thing. – Webster Aug 22 '17 at 19:49
  • @Webster Please avoid answering questions in the comments. This is an answer that I'd upvote. Thanks. – Vincent Aug 23 '17 at 14:50
  • 2
    This is far too broad and unclear to be answerable in any way. How could we possibly know what the right width or height of an element in your design is when we have no idea what it’s supposed to look like? – Janus Bahs Jacquet Sep 21 '17 at 22:04
1

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

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.