I have a mobile slideshow that I want to have a fullscreen option for. I have created a pseudo-fullscreen CSS that works fine but it stretches the image to fill. I have tried some techniques like wrapping it in a div and setting the CSS to auto for height and width but it still stretches.
The CSS just sets all to 0 top bottom left and right. I know its a "hack" but this works great for my HTML5 video it even keeps the ratio. not so hot for images though. I have tried the CSS3 object-fit but that has little to no browser support afaik.
Is there a way to get the image to go fullscreen and keep the aspect ratio? maybe using a letterbox like look to fill the other space(either vertically or horizontally). I need this to be dynamic so it will work on multiple mobile devices with different screen sizes. I have seen this work on google images on my mobile devices but obviously they are more clever than I am.
I am using jQuery Mobile and PHP on the back end. I was thinking a JS solution would be best but PHP would be welcome too.
I believe you're looking for the background-size property. You can set it to either contain or cover as of CSS3.
contain, which specifies that the background image should be scaled to
be as large as possible while ensuring both its dimensions are less
than or equal to the corresponding dimensions of the background
positioning area.
cover, which specifies that the background image should be scaled to
be as small as possible while ensuring both its dimensions are greater
than or equal to the corresponding dimensions of the background
positioning area.
MDN Docs: https://developer.mozilla.org/en/CSS/background-size
background-size : cover would be a full-screen image and background-size : contain would be the letterbox effect.
Related
I am a newbie to web development and am trying to build my first website. I use PHP, Jquery and Bootstrap3 for my development. I want to add a Faceebook like cover photo upload and reposition feature on my site and it's been bit of a head ache. I have implemented all the features successfully by taking help from tutorials available here and here, but both of them are not perfect.
In both the tutorials, everything works fine until the final stage where you save the new repositoned image.
In the first approach, upon save, the new position of the image, the height and width of the container div are taken as inputs and a new image is generated using imagecreatetruecolor($width, $height);. The original image is saved separately and used if you want to reposition again.
In the second approach, simply the new position of the image is saved in the db and the same is set as "margin-top" for the (so called) repositioned image on page load.
Problems
The first approach is actually doing a good job by saving the images separately. However, the issue here is, the dimensions of the new image are set as per the dimensions of the container div. Since my container div is responsive, the height and width vary on screen size, and so does the actual size of the image. This is a disaster because if you crop the image on a mobile screen, the width is set to 200px and the same image is loaded on large screens, where the container width is close to 600px. It creates an empty whitespace.
The second approach is not doing anything but position the same image using css. The original image of big size is unnecessarily loaded every time.
I have implemented the first approach and made a lot of changes to fit my needs.
The problem is better illustrated in this .gif image on Imagur. Also please refer my other Stack Overflow question Scale down images effectively without losing aspect ratio or quality in php for more detailed explanation.
I have been struggling for more than a month now to figure out how to effectively crop the new image and save it so that it is consistent on all screen sizes.
I hope some expert can give me a solution for this so that I can launch my dream website without further delay.
Thank you
You don't have to generate a new image if the size of the screen changes. You can simply use percentages to maintain the original aspect ratio of the image.
You simply need to set the container to whatever width you want, then don't set the height, and set a child img to fill the entire width of the container. The height of the image will automatically scale to maintain the original aspect ratio:
div.aspect
{
width: 75%;
}
div.aspect img
{
width: 100%;
}
JSFiddle
I have an image which is essentially a star-burst effect. The color of the star-burst is white, and the background is transparent (PNG w/ Alpha). I randomly generate these star-bursts onto an HTML5 canvas at random locations, and at the same time, generate random Hue, Saturation, and Light (HSL) values. These could be RGB values, if this simplifies things.
The goal is to re-colorize the PNG for display on the HTML5 canvas based on the randomly generated HLS values before rendering it to the canvas.
I've read some other posts on StackOverflow and other sites, but the only solutions I've seen involve rendering it to the canvas, grabbing the coordinates for where the image is displaying, and modify the color on a pixel-by-pixel basis. In theory this could work, however some of the images may overlap slightly. Also if there is a background already present, then from what I understand, the background's color would also be modified which isn't much of a solutions for me either.
If this is out of the realm of what Canvases are capable of, as a fallback I suppose I would be okay with having images dynamically re-colored via PHP using GD2 or Imagick, or via the command-line via Gimp, ImageMagick or some other image library...
Thanks much!
-- OUTCOME --
Special thanks to #jing3142 for initial suggestion of off-screen canvas rendering, and #Jarrod for providing the vital piece I was missing: globalCompositeOperation = "source-in"
Here is a working implementation of the concept: http://jsfiddle.net/fwtW2/2/
Works in:
Chrome
Firefox
IE 9 (haven't tested other versions)
How about a second canvas that has the size of the image, place the image on that canvas, re-colour as required, extract re-coloured image and place at random on main canvas, re-colour image on second canvas using new HSL values, extract and randomly place on main canvas and repeat?
This may help as well https://developer.mozilla.org/en-US/docs/HTML/Canvas/Pixel_manipulation_with_canvas
I'm pretty sure you can just use the source-in globalCompositeOperation opertaion? No need to get all hardcore and crazy with vector images.
This code is where the magic happens:
var color = 'red';
ctx.fillStyle = color;
ctx.globalCompositeOperation = "source-in";
But yOu'd need to re-draw this to an offscreen canvas: You can do that like so
createBuffer = function(sizeW, sizeH)
{
buffer = document.createElement('buffer');
bufferCtx = buffer.getContext('2d');
buffer.width = sizeW;
buffer.height = sizeH;
}
then just draw your image to the offscreen canvas and apply the global composition.
Here’s how to easily recolor your starbursts just before rendering on canvas
Convert your starburst.png into a vector path! (I know, you will have to drag out Gimp/Illustrator for this one time—but it’s worth it!)
Starburst paths can have fills and the fills can be solid colors or even gradients—as fancy, random recoloring as you need!
Starburst paths can scale without the pixilation of raster images like .png’s.
Starburst paths can rotate to show diversity in your bursts--and even skew to represent a bit of 3d motion.
If you want to get fancy, you can even create “glowing” bursts by using shadows and blurs.
Starburst paths are faster to render than .png images—especially if you need to manipulate each .png before drawing.
How does pinterest rescales their images? Even if you upload a 16x16 icon, it will rescale it but make it look smooth.. Does anyone know how they how their resize mechanism works?
The example you provided looks like they simply set the height of the image to be the height of the container, i.e. in the height attribute of the <img> tag. I wouldn't say it looks smooth at all, plus the aspect ratio is obviously way off.
But if you want to resize images in PHP yourself, there are several image libraries like GD. Take a look at the imagecopyresampled function (there is some example code on that page) or search for some tutorials.
i have image with various size. and i also have various container to place those image.
example : i have 680 x 1024 image that will placed on 500x500 container without cropping.
so i thought that i will need to build image with container size, than put resized image on top of it.
result that i expected is something like this
or this
how the best way to achieve this on PHP or wordpress?
I wrote a plugin, currently at WordPress plugin repository:
JResizr
This plugin have ability to override default worpdress behavior and disable croping image but try to resize image to fit rectangle container size and fill space with background color. You also able to choose background color to use.
There are several ways to accomplish this. One alternative to javascript/php, if the images are roughly the right size, is just use CSS, specifically background-size: contain
contain
This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.
You can experiment with it at http://jsfiddle.net/RxTLS/
Keep in mind this is mostly supported, although IE8 and below do not. I believe there are some polyfills our there though if you're worried about IE users.
This solution is only ideal if the images you are uploading are close to the size they will be displayed however. Trying to do this with images that are over 3000 pixels wide/tall is not advised for several different reasons.
In that case, you'd want to shrink them in PHP first. If you're uploading the images through Wordpress then you can use add_image_size in your functions.php and the images will be automatically resized when you upload them. Alternatively, you can do it manually in PHP as well and there are plenty of tutorials on how to do that out there. I'd just google PHP image resize.
In your html where you have <img> tag, add a width attribute, and set it to 100% that should auto resize your image to its containers size
<img src="imageNamw.jpg" alt="imageAlt" width="100%" />
You could write a simple Js file that would accomplish that.
I have done such thing before; So basically you compare the height and the width of the image in its container. then if the height is longer than the width you set the height to 500px and set the width to auto;
else if the width is longer than the height you set the width to 500px and the height to auto;
else you set the width and the height to 500px;
set the container vertical align to middle and text-align to center in css and that should do the trick;
You can also try a simple timthumb library to resize images in any size.
Please check the timthumb library code here :
http://timthumb.googlecode.com/svn/trunk/timthumb.php
In WordPress it would be simply by using their image_resize function
image_resize( $file, $max_w, $max_h, $crop, $suffix, $dest_path, $jpeg_quality );
where you would set the file, width of the container, height of the container and false (as you want to resize, not crop). The others are optional and you should fill them if you have special needs for the new file destination or name or quality. If you entered everything correctly, the function should return path to your newly resized image.
Note that with WordPress you can actually do this automatically when uploading pics so then later you just retrive the already resized picture - take a look at add_image_size function.
So I just put up a website for my high school and realized a lot of images are stretched especially on this page
www.eriesd.org/central/central2/staff.php
What you be the best way to make the images not so stretched?
I was thinking of adding a div and adding background image with center center or 50% 50%. Also on the career and tech pages I noticed the info page doesn't load in IE but the other pages load fine has anyone else ever had this problem?
I'm basically getting the location in menu and option and calling an ajax request which loads 1 of the 3 layouts which connects to my database and gets information depending on the option and location.
Assuming that the pictures are uploaded using some kind of php CMS, the first thing I would do, is process the images correctly at the moment they are uploaded: Apart from the bigger image, you would need to generate a thumbnail that fits the size you need for that page.
I would also recommend adding a notice to people who are uploading a picture, that this specific picture needs to have a landscape format as that is what you are using on the page.
CSS solutions would be my last resort to iron out small issues.
Edit: Apart from that I would seriously reconsider publishing all e-mail addresses like that and add some pagination as the page now takes a long time to load (especially with all the images being a lot bigger than you need them to be...).
They are stretched because you specified both width and height attributes for the <img> tag. If the actual image is of different dimensions, one can see how the browser has no options but to distort the image to make it fit the specified height and width.
Just don't specify either height, or width, or both, and the images are going to be ok.
You should set the height only on the img and add the width:200px;text-align:center CSS to the anchor if you want the white area either side. Omitting the width will shrink the whitespace around the image.
<a class="image" style="width:200px;text-align:center">
<img src="http://www.eriesd.org/central/central2/images/staff/kranking.jpg" alt="missing photo" height="112">
</a>
I'll answer your first question concerning images. The real problem is that your images are not sized to fit the space you want them to fill. One of them that I inspected was a 6MP (2848x2144) image weighing in at 1.5MB. There were many more of this approximate size and dimensin. Any one of those images is larger than the entire page should be by quite a lot. The first step is getting images to the size you need them to be. Your page is nearly 19MB. Not only so most browsers do a lousy job of scaling images, you're sending a ton of extra data and making the page load very slowly for users without very fast connections. Imagine a user with a mobile browser waiting on this and chewing through their data plan! A user with DSL might need several minutes; dial-up could require hours.
If you're uploading them manually, resize them first. Figure out a size constraint and resize and crop first. If you're using a CMS, find settings, plugins, or customize it to make a smaller thumbnail version and use it.
To keep the layout looking nice and equal, the only thing you can do is either stretch them as it is now, or, even better, crop the images a bit and resize them. You can probably do it programmatically for most of the pictures, just assume that the top center is where their head will be. You have stretched picture issues all over the site though.
As for the Career & Tech pages, they're still actually being loaded (at least in the latest IE) if you look at the source, but they're not being shown for some reason, so, either you have some CSS or JavaScript issues with .post or .content. It even pops up for a second sometimes and then disappears.
If you specify only a width, the height will be set proportionally and thus prevent stretching of your images.