Every time the window is sized from big:
http://res.cloudinary.com/liberationfront/image/upload/v1497626018/vb1_t29xlz.png
To small:
https://res.cloudinary.com/liberationfront/image/upload/v1497625905/vb2_gtmjrl.png
There is all of a sudden a gap.
The problem is likely that your images don't all have the exact same aspect ratio, so some of them end up a pixel taller than others in some cases. Then the floated columns don't clear properly.
You can either re-crop your images, which is a fragile solution since you then rely on all future images being perfectly cropped, or you can set your cards' height through CSS and let the images flow to fit. Often using background images gives much more flexibility.
I suggest looking into Bootstrap's responsive embed and setting your images as backgrounds on a child element. Create your own 1:1 class if needed.
Related
My problem is three-fold. I'm going to try to explain as detailed as I can, because I've asked this question before and haven't gotten any clear answers.
What I'm Trying to Do:
I have diagonally shaped images, that I'm trying to make clickable, so I separated them out of the background image. They were originally one image, but I've cut out several pieces of the image and I want to align them identically to how they were in the original image. This might not the best method for what I am trying to achieve, and if there is a better way to make non-square areas of an image clickable, that would solve all of these problems. If not, here is my problem. The problem is, as soon as I align them in XML, I boot them up on an Android emulator or my phone, and they are aligned differently on both, differently than the preview and from each other.
Below is my example, and I'll try to explain what I mean.
The black and white grid is my background. The brown, red, and yellow lines are separate images. I don't want to just combine them with the background, because I need those lines to be clickable. I'd set a button behind them, but they are diagonally shaped and I need the entire shape to be clickable. However, they have to be EXACTLY where they are in the background, aligned specifically as they are to the background. The problem is, as soon as I load it on another device, it scales, and everything misaligns.
It also misaligns depending the device, so I presume it's because it's scaling the different parts differently.
I need a way to align it the way I want it, and have each image scale together.
How I've Been Trying This So Far:
Initially, I tried just using XML. And herein was my first problem. My background image is 1920x1080. It loads on the emulator without a problem. However, if I try to load it on my phone, I get the following error:
OpenGLRenderer: Bitmap too large to be uploaded into a texture (5760x3240, max=4096x4096)
So that leads to my first question. Why is my 1920x1080 trying to load as 5760x3240?!
I bypassed this, by using Picasso to scale the image to 1920x1080. As a sidenote, in addition to programmatically loading the image, I also am removing the title bar. Here is my OnCreate:
super.onCreate(savedInstanceState);
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.activity_main_layout);
Picasso.with(this).load(R.drawable.backgroundimage).resize(1920,1080).into((ImageView)findViewById(R.id.background));
On the XML side, I've tried all sorts of different things. Relative layouts, linear layouts, frame layouts...None seem to scale the separate imageviews the same.
Which leads to my second question.
How do I scale two differently sized imageviews together, so that they maintain their alignment on different sized devices?
My second imageview is 198x547(this would be the equivalent of one of the squiggly lines in the example images) and even setting that in Picasso does not maintain my alignment. In fact, that doesn't seem to work at all, since I have to scale it differently to even match the alignment I have in the original image.
Summary Questions
I need a diagonally shaped portion of an image to be clickable. Is cutting the shape out as a separate image the appropriate method for doing so? If not, how do I make such a specific, non-square area of an image clickable?
I need specific alignments to scale together. Why aren't they?
Why does my png file upscale itself?
I'm working with documents, so maintaining the the original image dimensions and subsequent dpi is important.
The aspect ratio is always maintained so the automatic fill modes and alike don't seem to have any effect.
Say I have a 300 dpi document and the user want to clear an inch border around the image. So I need an inch cropped from the image but the result needs to be the original image dimensions (2550x3300).
I have been able to achieve this effect with...
...&crop=300,300,-300,-300&margin=300,300,300,300
This works, but seems more than a little clunky. I've tried a lot of other combinations but they all seem to enlarge or reduce the image size which is undesirable in my case.
So does someone know a simpler syntax to achieve the desired result, or do I need to re-size the image then calculate and fill with a margin as I'm doing now.
Thanks
It turns out that my example requests the image in it's full size which turns out to be a special case. When I introduce a width or height into the command line things don't work very well since crop size is in respect to the original image dimensions and margin size is in respect to the result image.
Thinking about it more I abandoned the crop approach. What I really needed was a way to introduce a clipping region into the result bitmap. So I built an extension to do just that. It works well as it doesn't interfere with any of Resizer's layout calculations and the size of the returned image is whatever the height or width were specified as. Which is just what I needed. The Faces plugin has an example of introducing a clipping region.
Karlton
Cropping and re-adding 300px on each edge is best accomplished exactly the way you're doing it:
&crop=300,300,-300,-300&margin=300
What kind of improved syntax would you expect? This isn't a common operation.
I am creating a simple photo filter app for OS X and I am displaying a photo on an NSImageView (actually two photos on top of each other with two NSImageViews, but the question still applies for a single view too). Everything works super, but when I try to resize the window that contains the NSImageViews, the window (which also resizes the NSImageViews) resizes very slowly, at about less than 1fps, creating a negative impact on the user experience. I want resizing windows to be as smooth as possible. When I disable resizing the image views, the window resizes smoothly, so the cause of the slowdown is those NSImageViews.
I'm loading 20-megapixel images from my DSLR. When I scale them down to a reasonable size for screen (e.g. 1024x768), they scale smoothly, so the problem is the way NSImageView renders the images. It (I assume as the result of this behavior) tries to re-render 20MP image every time it needs to redraw it into whatever the target frame of the view is.
How can I make NSImageView rescale more smoothly? Should I feed it with a scaled-down version of my images? I don't want to do that as it's a photo editing app that also targets retina display screens and the viewport would actually be quite large. I can do it, but it's my final option. Other than scaling down, how can I make NSImageView resize faster?
I believe part of the solution your are looking for is in NSImage's representations. You can add many representations to an image with addRepresentation: I believe there is some intelligent selection done when drawing. In your case, I think you would need to add both representations (the scaled-down and the full resolution bitmap) to NSImage. I strongly suspect drawRect: should pick the low resolution version. I would make sure "scale up or down" is selected in NSImageView, because the default is scale down only, which may force your full resolution image to be used most of the time. There are some discussion in Apple's documentation regarding "matching" under "Setting the Image Representation Selection Criteria" in NSImage, although at first sight this may not be sufficient.
Then, whenever you need to do something with the full image, you would request the full resolution image by going through the representations ([NSImage representations] returns an array of NSImageRep).
I am designing a simple music app where the user gets to play instruments i.e. Drums, and the problem that I am facing is with resolutions.
The drums are images, which I have converted them into buttons. Everything looks great at the state that I have designed it.
However, when I switch to other resolution states, the button(image) are distorted, e.g. skewed, scaled, and looks nasty.
I have tried designing or arranging them via selecting 'Enable state Recording', but the specific designs for that state are not being saved.
Have you tried the approaches discussed here? http://msdn.microsoft.com/en-us/library/windows/apps/hh465362.aspx For the actual button sizes, make sure you are not fixing the width/height with pixel values. Use * weighted rows and columns to layout your grids and have the buttons autosize to fill a given cell in the grid. Then match with the appropriate image resource per the article.
Grids are great for dividing up available space but they can't account for changes in aspect ratios. If your items are still set to Stretch (or Fill) then they can end up out of aspect ratio. Another option is to design the entire layout at a fixed size (let's say 1024 x 768 or 1366 x 768) and wrap the entire thing in a ViewBox. ViewBox will scale all elements equally and maintain the aspect ratio, adding letterboxing (or empty space) on the sides / top & bottom if necessary. This might be a better approach for a drum kit.
Hope that helps.
Redid the whole project of designing again.
This time, I put the image inside a specific grid and that made things lot better. :)
I've noticed that when dynamically creating a large canvas (6400x6400) that quite alot of the time nothing will be drawn on it, and when setting the canvas to a small size it works 100% of the time, however as I don't know any better, I have no other choice than to try and get the large canvas working correctly.
thisObj.oMapCanvas = jQuery( document.createElement('canvas') ).attr('width', 6400).attr('height', 6400).css('border','1px solid green').prependTo( thisObj.oMapLayer ).get(0);
// getContext and then drawing stuff here...
The purpose of the canvas is to simply draw a line between two nodes (images), which are within a div container that can be dragged around (viewport I think people call them).
What I "think" may be happening is that on a canvas resize it emptys the canvas, and that is interfering with the context drawing, as like I said previously it works all the time when the canvas is alot smaller.
Has anyone experienced this before and/or know any possible solutions?
That is an enormous sized canvas. 6400 x 6400 x 4 bytes per pixel is 156 MB, and your implementation may need to allocate two or more buffers of that size, for double buffering, or need to allocate video memory of that size as well. It's going to take a while to allocate and clear all that memory, and you may not be guaranteed to succeed at such an allocation. Is there a reason you need such an enormous canvas? You could instead try sizing your canvas to be only as large as necessary to draw the line between those two divs, or you could try using SVG instead of a canvas.
Another possibility would be to try dividing your canvas up into large tiles, and only rendering those tiles that are actually visible on the screen. Google Maps does this with images, to only load images for the portion of the map that is currently visible (plus some extra one each side of the screen to make sure that when you scroll you won't need to wait for it to render), maintaining an illusion that there is an enormous canvas while really only rendering something a bit bigger than the window.
Most browsers that implement HTML5 are still in early beta - so it's quite likely they are still working the bugs out.
However, the resolution of the canvas you are trying to create is very high .. much higher than what most people's monitors can even display. Is there are reason you need it quite so large? Why not restrict the draggable area to something more in line with typical display resolutions?
I had the same problem! I was trtying to use a big canvas to connect some divs. Eventually I gave up and drew a line using javascript (I drew my line using little images as pixels- I did it with divs first, but in IE the divs came out too big).