I have a generally problem with responsive images: The websites I create often have two to four columns. When I have a three or four column grid with an image in every column, the images are very small. On mobile devices, the columns will be broken down to one column, so the images are displayed bigger.
But every responsive images solution only looks for the viewport, that means, on big screens the large images are requested (although the images are displayed very small because they are in columns) and for mobile devices the small images are requested.
Is there a responsive images solution which looks after the width of the image or the width of the surrounding element of the image?
Related
In mobile view mapbox renders black image instead of raster image. I suspect this is because of the size of image(3.9 MB), also this is happening mostly on chrome browser for mobile. Please help me find the potential issue here?
This sounds as if you could be running into the No-Data issue, when rendering transparency.
The black background that appears is the part of the raster image that does not contain any data. Generally a raster image is a rectangular grid of pixels. When you are working with data that is not rectangular, there are pixels within the grid that don't contain any data. These pixels are expressed as NoData values and represent the absence of data. GeoTIFFs that are uploaded to Mapbox Studio are displayed as JPEG to save space and make maps load quickly. Since JPEG cannot display transparency, NoData values appear black.
Please see this documentation on how to resolve this:
https://docs.mapbox.com/help/troubleshooting/raster-transparency-issues/#why-black-backgrounds-appear
I am using ImageResizer to resize the images and display on the bootstrap layout.
Here I am fixing the image sizes while retrieving them to display the sizes in URL.
Issue is, image quality is lost as dimensions are different for different screen sizes and I am unable to adjust the image which is retrieved to fit exactly to the screen size.
Eg: for 14 inch monitor if size of image is 300*300 which gives perfect quality image, if the same image is viewed in 21 inch monitor the 300*300 image retrieved from imageresizer is loosing quality and getting blurred.
Can some one say what is best solution to retrieve images?
Thanks in advance.
Praveen.
Slimmage.js offers automatic resolution and dpi-switching using the ImageResizer URL API. It is probably the easiest way to achieve what you are looking for, as you just install it and set a CSS max-width on images. Done.
Why this is a problem (like Amy says in the first comment):
Because of high-density displays, browser pixels and screen pixels are not 1-1. Thus you need to use a images-swapping technique like srcset, picture, or Slimmage.js. srcset and picture require polyfills to work on older browsers.
I'm designing a responsive site using edge reflow with the following rules for breakpoints:
<480px, <768, 1024>
I'm using a different background picture for each breakpoint of respective widths. However when I add them to Reflow with contain for scale-x it seems as if the image I created is not that size. Most of them were at least 200 pixels shorter than designed.
So my question is what dimensions should I use background images for each breakpoint as well as any other guidance for this using Reflow or suggestions of I'm doing something wrong.
Normally I'd use cover rather than contain but then the image scales and doesn't show what I need it to from device to device.
Thanks
I am working with Bootstrap, and Flat UI. I am trying to have a header area span full width and the rest of the website fit inside a container thats 940px. The header area looks good in all non-mobile browsers, but when I view it using Safari and Chrome in iOS6 the header is not spanning full width. Can anyone help?
You can view the site here
The problem is that you have a fixed width of 940 pixels on content area of your website and your top banner is set to only take up 100% of the viewport. On a cellphone, 100% of the viewport is less than 940 pixels so you can scroll horizontally to see the rest of the content, but the top banner doesn't stretch further than the original 100% of the viewport.
Instead you may want to try to make your content area more responsive using media queries so that it is more narrow on smaller screens, or you could just give your content area a width of 100%, or you could give your banner a min-width of 940px.
In my application, I'm generating a FlowDocument with several paragraphs of text.
Using a FlowDocumentScrollViewer , I can display the document in my UI. If the document is too long for the available space, the FlowDocumentScrollViewer does it's job and introduces a vertical scrollbar. All good.
If I use a FlowDocumentPageViewer the response to show additional pages of text, also as designed.
However, what I want in my application is for the viewer to grow wider.
So, for a short document, the viewer is narrow (say, around 360 pixels with one column of text), but for a longer document the viewer is wider (say, around 720 pixels with two columns of text). An even longer document would expand to three columns, and so on.
I've seen a number of WinRT applications that do this kind of thing - The New Zealand Herald has one app. But, I'm working in regular WPF and have ended up stumped.
How can I display a FlowDocument so that it's all visible at once - no scrollbars, no pagination, just multiple columns of text stretching across?
Why do I want this? I'm showing several disparate pieces of information on a single page, and I want to have a single horizontal scrollbar for panning across the lot, not separate scrollbars for each piece. For example, I've got my ListBoxes working this way by using a WrapPanel as the ItemsPanelTemplate - when there are too many items for one column, another column opens up and the listbox gets wider to accomodate.