How to make an Image to full Screen?

JavaScript
1

Hi there

I am trying to display an Image to full screen but do not know how can I do this

I have read this thread on SO

but this doesn’t work for me

How can I do this?

Thanks

2

Hi

What do you mean talking about “fullscreen”?
You’re showing your image at full size already, how fullscreen mode should differ from that?

3

It Will something like when you play a Video on Youtube and click on full screen item that window will expand to full window of your browser

I hope you got my point

4

Do you want to stretch image that it will fill the whole screen?
Or just place it in center and hide all other elements on the page?

5

In a way noth :smile:

but if you ask choice second point

6

“full screen mode” is part of the OS and its media player / viewer.

I’m not sure you can do this for an image in a webpage.

7

Ok if Not full Screen can I hide other Items on that click and display only an Image with some change in dimensions?

8

Something like this http://jsfiddle.net/pxsjcg29/1/

But actually it seems like you’re looking for a lightbox jQuery plugin
You can find thousands of them in google, for example

9

This is exactly I am looking for

But How to Hide background and How to take Image at the center right Now it is Displaying on the top corner when I tested it on some browser

10

If I have set Image in Background How can I enlarge it

11

anyone?

12

You don;t seem to have a background image in that fiddle?

If you want to make a background image fit the container then use background-size:cover. This will enlarge or shrink the image so that it fills the space available while maintaining the aspect ratio of the image.

13

this is my updated jsfiddle

can you know explain in terms of code?

14

Hi,

It’s still not really clear what you are doing but to stretch the background image the element of course needs to have some appropriate dimensions and then you would say somwethng like:

.imageDemoBlock{
    background:url(https://hellokittydevotee.files.wordpress.com/2011/05/charmmy_kitty.jpg) no-repeat 50% 50%;
    background-size:cover;
    height:500px;
}

You can leave the height out if you just want the background to cover the content in that div, If you wanted the image to cover the whole page then you would be better off applying it to the body element instead.

However, I can’t really work out what you are trying to achieve because as already mentioned you seem to be looking to create a lightbox effect or similar.

15

Ok here is my updated jsfiddle

Now you can see what I want when user clicks on Full Screen Items then all the content in bottom bar,top bar and imageblock should height and their is just onlly one Image in the block

When user clicks on ESC then everything should restore

I hope now it becomes clear

16

I’m still confused because I do not know if you are using the wrong terminology or are mixing concepts.

“full screen” and “escape”, as in a Youtube video, are referring to a user’s monitor.
But this topics replies are about a webpage that will be inside a browser viewport.

If you are wanting a click on an image to not only fill all possible monitor space but also remove all browser chrome, I think this would be a very bad thing even if it would be possible.

A lighbox can also be closed by escape, but it would be “full size” not “full screen”

17

I don’t want full screen
if it is full-size and fit on whole screen(All others options at that time become unclickable)
It will be fine and work for me

19

Having other options be unclickable seems to imply that the image is not full size.

Is it more of a modal situation that you’re after? Which commonly is where a darker shading occurs outside of the image to indicate that only the image can be interacted with at this time.

See fancybox for example.

20

You mean something like this :slight_smile:

21

lol

I can see that my spending time getting into Discourse Ruby - Ember may have affected my not progressing with CSS and JavaScript.
(at least that’s my story and I’m sticking to it )