I have a view in my flex mobile application, in which I have a lot of pictures which should shown in VGroup. The pictures are 851x315, they should have width="100%". About and under the picture are white areas. I want put the next picture direct under the picture without any white areas.
Here a screenshot (I have scrolled on the screen, so that's better to see):
Have you tried setting the VGroup gap and padding to zero.
<s:VGroup gap="0" paddingTop="0" paddingBottom="0" paddingRight="0" paddingLeft="0">
...
</s:VGroup>
Related
I have a background image and I need to add bunch of oval buttons or images on in my case the "greenish" buttons on top of the background image, that I can click in each one of them and call a function passing a parameter. Please look on the screen shot and let me know how I can position every one of the buttons on top of the image and access them with a click (onPress). I guess the only way is using flex box but I couldn't figure out the style for it.
Thanks
Just style all the green buttons on relatively to the image's boundaries with position: absolute. Percentage values for positioning should work, if your image scales properly on screen size change.
I've been working on a new responsive website design and I have a gallery containing a grid of images which when the browser viewport is 768px or above spans 4 columns wide (so each image is about 25% of the viewport). Anything 767px or lower is only 1 column wide (making it full width at lesser resolutions).
The images at desktop size (over 768px) should be 220px wide (4 image columns).
Between 480px and 767px should be upto 420px wide (1 image column).
And mobile size (under 479px) should be upto 260px wide (1 image column).
I have three sources for each image. 220px, 260px and 420px.
As you can see from the above, the sizes don't follow the normal conventions of the smaller the viewport the smaller the image, so I've been researching and trying various options.
Following suggestions, I've been using Google Chrome in incognito mode and also inprivate browsing for internet explorer, with the browser viewports started small before loading the page, etc... to ensure any changes I've been making get updated.
The current code I've come to is the closest I've got to making it work and it is following an answer to someone's query (similar to mine) here on stack overflow. However, when trying to implement it I can't seem to get the browser to load the right images still, it always loads the larger 420px wide image.
my code is currently like so:
<img sizes="(min-width: 767px) 420px, 100vm"
srcset="images/thumbs/image_420.jpg 420w,
images/thumbs/image_260.jpg 260w,
images/thumbs/image_220.jpg 220w"
src="images/thumbs/image_220.jpg"
alt="example image"
/>
A second query whilst I'm on the subject. Would it be best to set the default img src in my scenario to the 260px image? As this would cover both desktop and mobile browsers in the event the srcset isn't understood and only the middle sized viewport (460-767px) would suffer. Or is it always best to set the default image to the smallest size?
Any suggestions would be appreciated, thank you.
-- EDIT --
Just a quick update, I thought I'd logically figured it out yesterday but it didn't work so I'm not sure I still understand the whole concept of the calculations. My latest edit looks like so:
<img sizes="(min-width: 460px) 420px, (min-width: 768px) 220px, 100vm"
srcset="images/thumbs/image_420.jpg 420w,
images/thumbs/image_260.jpg 260w,
images/thumbs/image_220.jpg 220w"
src="images/thumbs/image_260.jpg"
alt="example image"
/>
So in my mind I think that the sizes section I've listed states... if viewport is at least 460px then use the 420px image, else if viewport is at least 768px use the 260px image. Then the last 100vm means otherwise use whichever is best at full viewport width.
I've also amended the default file to be the 260px file as this fits most of the viewport sizes if something hasn't been recognised.
However, the above edit still loads only the 420px image.
Any suggestions would be very appreciated. Even if its just to correct my logic!
sizes is evaluated left-to-right. So the order is important. If the viewport is 1000px, then the first media condition (min-width: 460px) will match, and so that size 420px is chosen, and the rest of the sizes attribute is not evaluated at all.
Also, the unit should be vw, not vm.
So it should be:
<img sizes="(min-width: 768px) 220px, (min-width: 460px) 420px, 100vw"
srcset="images/thumbs/image_420.jpg 420w,
images/thumbs/image_260.jpg 260w,
images/thumbs/image_220.jpg 220w"
src="images/thumbs/image_260.jpg"
alt="example image"
/>
As for your second query, technically you can choose any image you like (even one not listed in srcset), but your reasoning makes sense to me. The only thing I would recommend is to put your chosen src image first in srcset, because older WebKit with partial x-only srcset implementation will pick the first item when it doesn't understand the descriptors.
I'm trying to display an image next to my 600px Content-Table on the left and right.
The image is 1px wide and 400px high and should be streched or tiled on the X-Axis.
Ofcourse it works with different approaches in all clients but Outlook 07/10/13.
My first approach was a background-image using various VML-Methods like v:rect, v:background or v:image which all did not work.
My latest approach is to simply use an img-Tag and use width:100%, width="100%" and even mso-width-percent:1000.
Sadly, none of the 100% methods seem to work in any Outlook later than 03.
Image tag will work at 100%, but only if the image dimensions are larger than the 100%. Outlook doesn't stretch past the default image width, which in your case is only 1px.
VML should also work, try emailbg.net
I have a Content Slider (All-in-one-banner sort of) on the home page of my website.
Every time this banner slides onto the next image in the queue, the other images (png format) on my page are getting pixelated. Especially it happens in Chrome.
Images and Icons such as the logos, icons used for navigation, etc... - they get pixelated when a new slide changes on the banner.
Please help me.
Demo link (Open in chrome):
When the slides in the banner change, Look at the logo on the top and the logos to the right, and also the profile pics below,: indiaemerge.com/ieys2013
The solution I could figure out is that one should NOT use an image with large dimensions.
For example: I was trying to use an image of size 800px X 400px to fit it into a division of 200px X 50px. Because of this the image was getting distorted when slides would change.
I reduced the dimensions and resolution of the image to match the target division's dimensions and it worked.
Another way to fix this is to use an svg image file.
So the lesson to be learnt here is that always try to use an image (in case it is png or jpg) whose size meets your requirement as precisely as possible. If it is an svg image file then there won't be any problem.
Can anyone tell me how this image is resizing? If you remove the bg from the page with firebug you will have a clear vision of the image.
http://canvas.is/images/logo_solid.png
I notice that when the page is scaled the width and height attributes apply and start to scale the image. I have looked through the page and there is no css indicating a percentage width or height and no js in sight.
How is this working?
Thanks
I would tentatively say this is a browser built-in feature as the url ends with image extension, browser know it's not html page, so it would render it in a different way.
Well, I still do not think there is something magical out there, in a normal html page, if you set a fixed width to an image, browser will resize its height automatically. It's more like this scenario:
<div class="image-wrapper">
<img width="100%" src="..."/>
</div>
image would be resized per its original ratio with the width change of image-wrapper