In other words, your picture will always scale in relation to the longest side of the space. On a mobile device, the image would scale based on the height of the screen.
On a laptop, header images will be scaled relative to the width of the screen. This can result in header images having parts of the picture appear ‘cut off’ - this is unavoidable in responsive design, but choosing an image that crops well to fit, will help. This means the image proportions are maintained on all devices, and images will always try to ‘fill’ the space they’re in as best they can. Responsive design scales page elements like your header images ‘proportionally’ to the original size of the image file you use, and will do this ‘relative’ to the space the image is set within on the page. Let’s look at five ways to optimize the images on your band website to get your design just right. Less work cropping a bunch of pictures means more time, well, playing music, right? With header images, this is especially important because responsive images will ‘fit’ as best as possible to the frame. When your site is viewed across different displays, it will adapt by stretching or shrinking moving around to fit into the space available.Īny photo you upload to your Bandzoogle website will stretch and scale depending on how large the ‘space’ the picture is in. This is where the concept of ‘responsive’ website design comes into play! How Responsive Design WorksĪ responsive website is built so that the positioning and size are ‘relative’ to the space they’re viewed in. The displays people see your site on can be just a few hundred pixels wide on mobile, up to thousands of pixels in width on newer hi-definition widescreen monitors.īecause new technologies provided a range of screen sizes that people can see your site with, it also required a new way of thinking about site design that made sure sites looked great on any screen - big or small, tall, or wide.
Nowadays, websites can appear across hundreds of different screen sizes, even in different orientations on the same device (landscape or portrait).
0 kommentar(er)
