I have the plugin working on a slideshow of images here:
http://samsweet.info/
I've uploaded all the images at the desired full size; all fall within 600 X 500 px. If I don't specify the height/width in the shortcode, the images are stretched and blown out to fill the entire content area. But when I specify the height and width in the shortcode, the images are not responsive and do not "shrink down" when the window is resized. Can someone guide me on how to get these images to (a) show up as they are at full size, centered and (b) resize properly in a smaller window/mobile device?
Any help appreciated!
If your slider is wrapped in a div, try just resizing the div with css. That way your images will keep their aspect ratio, but you can still use percentages (and max-width).
.slider-div{
width: 80%;
max-width: 600px;
}
This boggled my mind for a year and today I finally figured it out. It is the transition that is stretched. When I changed it to effect="none" it still worked and no more stretching. But the quick click buttons below the images no longer work. Ahhh...always something. But there's a clue at least.
Related
I am trying to have an image inside a ScrollView taking the full width of the screen while keeping its aspect ratio (I don't want a fixed background image). The answers in https://github.com/facebook/react-native/issues/950 seem to work for a View but not a ScrollView.
The null width/height trick just makes the image disappear. Setting the width using Dimensions.get('window').width does not work for some reason; it leaves some space either on the top and bottom or the left and right of the image depending on its aspect ratio.
I can't use Image.getSize() as the image is local and would rather avoid hard-coding the dimensions as I have many other images that need to be styled this way. I have tried many other combinations of flex, alignSelf, etc. but none seem to work.
Setting ScrollView's style={{width: "100%"}} works for me.
I have a 405x720 image that it is to cover the background image. I've noticed that it stretches the image if the device's screen is smaller than the image. (I'm using a Galaxy S4 to test my apps).
Here's what I have so far:
var fullView = Ti.UI.createImageView({
layout: 'vertical',
width: '100%',
height: '100%',
image: '/images/background.png'
});
I've heard about the clipping technique, however that is only available for iOS and I'd like to have it for both platforms. Is there a way to do this? Or should I try to resize it appropriately? Tips/Suggestions are appreciated!
You should use proper images according to the aspect ratio of screen you are going to run your app on.
You can do this by calculating the width-height ratio of device and then you can decide which image to show on.
But putting a single resolution image directly to cover up the whole screen
is never going to work.
To resize an image, you can use Ti.Blob class' methods after fetching your image using Ti.Filesystem
Also remember that putting an image on whole background takes lot of memory especially in Android. That's why most of the apps do not use complete image to cover up background, rather they use small images wherever necessary and fills up other areas by colors or gradients as required.
But if your requirement is only to use image in background then unload it as soon as you move to different screen and load it again as you are back on it.
Further points to keep note of:
If you set bg image on a View, then it will be fit to cover the dimension of a View. So, if you have a view of width/height to 100%, then image will be fit into it. It means that image size will depend on View's dimension, not the View dimension will depend on image size.
If you set image on ImageView, and suppose you have:
ImageView width = FILL to screen size of 720, then the image height will be automatically decided to keep the aspect ratio. It means that if you have an image of size width=720 and height=400, then the ImageView will be of width=FILL & height=400
Image of size width=1000 and height=800 & ImageView height = 400, then the ImageView will be of width=500 & height=400
The problem is that you're actually telling the image control to load the image on an object that is stretched to the entire width and height of the screen - and when the screen aspect ratio is different than the one you have cropped your image by then you get bad aspect ratio and image looks screwed up.
If you remove either the width or the height, than the aspect ratio of the image will be loaded.
When I want a background image what I found the best way is to make a square image, and then set my ImageView height to Ti.UI.FILL and my width to Ti.UI.SIZE - That way it shows good aspect ratio and side that dont "fit" the screen (width or height) are not shown.
I'm working on an iPhone app where I'm using Pixate:
navigation-bar back-indicator {
background-image: url(backIcon.png);
background-size: 25;
}
This results in:
however its not centered with the Back text. How do i get the image to move down slightly?
Ive tried background-top-padding however that simply squashes the image down.
Any ideas? Thanks.
After playing around with padding options, it seems like anything larger than the default indicator height (22pts) cannot be pushed downward with padding.
If you want to create a smaller back indicator, you can account for an increased padding by adjusting the height (or width) accordingly, like so:
navigation-bar back-indicator {
background-image: url(custom_arrow.png);
background-size: 17 19;
background-bottom-padding: 2;
}
Also, it's worth noting that adding right padding to the back indicator will not move the back button text right, so you won't be able to fix the horizontal overlap in your particular example with padding on the back indicator. However, several examples from Apple drop the text altogether when using large indicators, so you might want to consider this as an option.
I want a background-image that only resizes if the browser is larger than the image size. Therefore, I need a min-height equal to the image pixel height, but also a height of 100% if the browser's height is larger than the image height.
I know I might be able to do this with a div, but would rather use the background-image & background-size CSS properties. This is all I have so far:
body{
background-image:url('Images/newBG.jpg');background-size: 1911px 824px;
}
Any idea where I should put the min-height or if this is even possible without using a div? If someone has the div solution, I would appreciate that also.
Let's say i have a sprite with lots of icons. I want to place one of the icons in the specific position over the div, e.g. 15px from the right side and 20px from the top.
Previously, when i had single image file i used the following code:
background: white url(./imgs/some/icon.png) no-repeat 91% 47%;
Now then the image is in the sprite i can access it using
background-position: 0 -471px;
But as i see it there is no place to add my current 91% 47%. Is there some kind of workaround?
It's possible to use CSS3 in the project if it helps.
Thanks!
Would you be able to add another <div>, give it the correct background, and absolute position it where it needs to be? I'm thinking that your background-position percentages are probably out when you use a sprite sheet.
If I understand your set of constraints correctly, you might be able to pull it off with a single div, but only if your png has a transparent background and the icon has enough "transparent space" as to not reveal any other icons.
Try:
background: white url(./imgs/some/icon.png) 91% 47% no-repeat, transparent url(./imgs/some/icon.png) 0 -471px no-repeat;