Styjun

Are there historical examples of audiences drawn to a work that was "so bad it's good"?

Did significant numbers of Japanese officers escape prosecution during the Tokyo Trials?

Complications of displaced core material?

Why is 'additive' EQ more difficult to use than 'subtractive'?

Why is this integration method not valid?

Flatten not working

Is it normal to "extract a paper" from a master thesis?

Comparison of bool data types in C++

To exponential digit growth and beyond!

Fill area of x^2+y^2>1 and x^2+y^2>4 using patterns and tikzpicture

The disk image is 497GB smaller than the target device

Gravitational Force Between Numbers

switching alignment

How do you earn the reader's trust?

Did Game of Thrones end the way that George RR Martin intended?

Why A=2 and B=1 in the call signs for Spirit and Opportunity?

What could be my risk mitigation strategies if my client wants to contract UAT?

Using too much dialogue?

Are cells guaranteed to get at least one mitochondrion when they divide?

Count all vowels in string

How does the Earth's center produce heat?

Have any humans orbited the Earth in anything other than a prograde orbit?

How did the Allies achieve air superiority on Sicily?

Is "vegetable base" a common term in English?

how to set max scale on a picture in all directions?(desktop/phone)

How do you stretch an image to fill a <div> while keeping the image's aspect-ratio?How to vertically center a div for all browsers?How to replace all occurrences of a string in JavaScriptHow do I set/unset a cookie with jQuery?How can I set the default value for an HTML <select> element?permanent 2x3 CSS image galleryImage resize within browserbackground image auto-scale width fixed heightHow to image scale with user selectionbootstrap img responsive height does not keep container heightDynamic image placement and cropping

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

I'm trying to make a web image gallery for all my photos.
And when i click an image i want it to pop up in full screen.
I use a container to be able to add the pictures and an exit button.

Is there any way without Javascript to make the picture scale max in all directions, without loosing aspect? A portrait picture for example will at a desktop have a height at 100%, while on phone the width will have too be 100%.

if i add just the picture it will scale right, but inside the container it gets tricky for me.

.container
 margin-top: 1%;
 z-index: 20;
 margin-left: auto;
 margin-right: auto;
 position: fixed;
 left: 50%;
 transform: translate(-50%, 0);
 max-height: 95%;


.container img 
 max-width: 100%;
 max-height: 100%;*/



<div class="container">
 <img src="IMG_9810.jpg" class="imagepopup">
 <button class="btn">X</button>
</div>

javascript html css

share|improve this question

edited Mar 23 at 22:31

Scott Marcus

41.9k52142

asked Mar 23 at 21:56

perandperand

33

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Possible duplicate of How do you stretch an image to fill a <div> while keeping the image's aspect-ratio?
  
  – cjl750
  Mar 23 at 22:30
  

  
  
  
  


• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  Short answer: .container img width: 100%; height: 100%; object-fit: contain; should do pretty well in modern browsers, but for older browsers you need JavaScript to query the image's width and height and set either width: 100%; height: auto or height: 100%; width: auto. Either way that would assume that you change .container to fill the entire screen, though, rather than letting the size of the image determine its size.
  
  – cjl750
  Mar 23 at 22:34
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks for the help. But then the container will stretch, and be bigger than the image? or am i understanding this wrong?
  
  – perand
  Mar 23 at 22:57
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  That is correct. I would recommend adding one more wrapper div. Have one outside div fill the whole screen (almost, at least), maybe have a background color to cover the page behind it, and have the close button be absolutely-positioned in the top corner of the screen relative to that outside div. Then .container would also fill the whole screen but would just be transparent background color, so it will just look like the image is sitting on top of the outer div.
  
  – cjl750
  Mar 23 at 23:10
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thanks for the help. , that is what i have done. but maybe adding the exit button to the top right corner instead of picture is a good enough idea
  
  – perand
  Mar 23 at 23:26
  

  
  
  
  

 | 
show 1 more comment

0

I'm trying to make a web image gallery for all my photos.
And when i click an image i want it to pop up in full screen.
I use a container to be able to add the pictures and an exit button.

Is there any way without Javascript to make the picture scale max in all directions, without loosing aspect? A portrait picture for example will at a desktop have a height at 100%, while on phone the width will have too be 100%.

if i add just the picture it will scale right, but inside the container it gets tricky for me.

.container
 margin-top: 1%;
 z-index: 20;
 margin-left: auto;
 margin-right: auto;
 position: fixed;
 left: 50%;
 transform: translate(-50%, 0);
 max-height: 95%;


.container img 
 max-width: 100%;
 max-height: 100%;*/



<div class="container">
 <img src="IMG_9810.jpg" class="imagepopup">
 <button class="btn">X</button>
</div>

javascript html css

share|improve this question

edited Mar 23 at 22:31

Scott Marcus

41.9k52142

asked Mar 23 at 21:56

perandperand

33

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Possible duplicate of How do you stretch an image to fill a <div> while keeping the image's aspect-ratio?
  
  – cjl750
  Mar 23 at 22:30
  

  
  
  
  


• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  Short answer: .container img width: 100%; height: 100%; object-fit: contain; should do pretty well in modern browsers, but for older browsers you need JavaScript to query the image's width and height and set either width: 100%; height: auto or height: 100%; width: auto. Either way that would assume that you change .container to fill the entire screen, though, rather than letting the size of the image determine its size.
  
  – cjl750
  Mar 23 at 22:34
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks for the help. But then the container will stretch, and be bigger than the image? or am i understanding this wrong?
  
  – perand
  Mar 23 at 22:57
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  That is correct. I would recommend adding one more wrapper div. Have one outside div fill the whole screen (almost, at least), maybe have a background color to cover the page behind it, and have the close button be absolutely-positioned in the top corner of the screen relative to that outside div. Then .container would also fill the whole screen but would just be transparent background color, so it will just look like the image is sitting on top of the outer div.
  
  – cjl750
  Mar 23 at 23:10
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thanks for the help. , that is what i have done. but maybe adding the exit button to the top right corner instead of picture is a good enough idea
  
  – perand
  Mar 23 at 23:26
  

  
  
  
  

 | 
show 1 more comment

I'm trying to make a web image gallery for all my photos.
And when i click an image i want it to pop up in full screen.
I use a container to be able to add the pictures and an exit button.

Is there any way without Javascript to make the picture scale max in all directions, without loosing aspect? A portrait picture for example will at a desktop have a height at 100%, while on phone the width will have too be 100%.

if i add just the picture it will scale right, but inside the container it gets tricky for me.

.container
 margin-top: 1%;
 z-index: 20;
 margin-left: auto;
 margin-right: auto;
 position: fixed;
 left: 50%;
 transform: translate(-50%, 0);
 max-height: 95%;


.container img 
 max-width: 100%;
 max-height: 100%;*/



<div class="container">
 <img src="IMG_9810.jpg" class="imagepopup">
 <button class="btn">X</button>
</div>

javascript html css

share|improve this question

edited Mar 23 at 22:31

Scott Marcus

41.9k52142

asked Mar 23 at 21:56

perandperand

33

.container
 margin-top: 1%;
 z-index: 20;
 margin-left: auto;
 margin-right: auto;
 position: fixed;
 left: 50%;
 transform: translate(-50%, 0);
 max-height: 95%;


.container img 
 max-width: 100%;
 max-height: 100%;*/



<div class="container">
 <img src="IMG_9810.jpg" class="imagepopup">
 <button class="btn">X</button>
</div>

share|improve this question

edited Mar 23 at 22:31

Scott Marcus

41.9k52142

asked Mar 23 at 21:56

perandperand

33

share|improve this question

edited Mar 23 at 22:31

Scott Marcus

41.9k52142

asked Mar 23 at 21:56

perandperand

33

edited Mar 23 at 22:31

Scott Marcus

41.9k52142

edited Mar 23 at 22:31

Scott Marcus

41.9k52142

asked Mar 23 at 21:56

perandperand

33

asked Mar 23 at 21:56

perandperand

33