Mobile responsive images

RCDAwebmaster · April 12, 2018, 2:31pm

I’m creating a redesign of a website. The site will have slideshows which will display in a modal window. The photos are not all the same size. I’ve got the modal window resizing to 85% of the height and width of the view port.

I’ve got the photos displaying in the modal window. Where I’m running into trouble is getting the pictures to retain the correct aspect ratio and not resize bigger than the photo size.

Currently, if an image is smaller in width or height of the modal window, the image displays properly. If the image is larger, it fills the modal window not retaining the aspect ratio.

I tried Googling this and found many different CSS tricks. None do exactly what I want

Here is the CSS and HTML I’m using for my modal window (BTW, this is the code created from a PHP script):

<style>
 body {
  font-family: Arial, sans-serif;
  background: url(http://gautamjhaofficial.in/wp-content/uploads/2016/07/water-drops-2-533x261.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index:1000;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 85%;
  position: relative;
  /*transition: all 5s ease-in-out;*/
  z-index:1000;
}


.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}

@media screen and (max-width: 1500px){

.popup .content {
  max-height: 30%;
  overflow: auto;
  font-size: 18px !important;
}

#pic{
	height: 75vh;
}

}

@media screen and (max-width: 800px){
  .popup{
    width: 90%;
  }
  .popup .content {
  max-height: 30%;
  overflow: auto;
  font-size: 10px !important;
}
#pic{
	height: 50vh;
}

}
    

	
</style>







<div id="photos" class="overlay">
	<div class="popup">
    
		<h3 class="modal-title" style="color:#777777;"><strong>
                
         2018 Photos</strong> </h3>
		<a class="close" href="javascript:cl();">×</a>
		<div class="content" style="text-align:center; border:blue 1px dashed;">
		<div id="title" name="title"></div>
           <br />
           <img class="slideshow" src="photos/2018_01_2018 Photos/1.jpg" name="pic" id="pic" />
           <div style="text-align:right; font-size:8pt;" id="of"></div>
		</div>
 <script>
	which = 0;
	next();

	function next()
	{
		which = which +1;
			
		//restart loop when last item reached
		if (which > 5){
			which = 1;
		}
		
		if(which == 1 ){
			document.pic.src = "photos/2018_01_2018 Photos/01.jpg";
			document.getElementById('title').innerHTML = "title 1"; 
		}
		
		if(which == 2 ){
			document.pic.src = "photos/2018_01_2018 Photos/02.jpg";
			document.getElementById('title').innerHTML = "title 2"; 
		}
		
		if(which == 3 ){
			document.pic.src = "photos/2018_01_2018 Photos/03.jpg";
			document.getElementById('title').innerHTML = "title 3"; 
		}
		
		if(which == 4 ){
			document.pic.src = "photos/2018_01_2018 Photos/04.jpg";
			document.getElementById('title').innerHTML = "title 4"; 
		}
		
		if(which == 5 ){
			document.pic.src = "photos/2018_01_2018 Photos/05.jpg";
			document.getElementById('title').innerHTML = "title 5"; 
		}
	document.getElementById('of').innerHTML = which + ' of ' + 5;
	t=setTimeout("next()",4000);
	}

	function cl(){
	t = clearTimeout(t); 
	window.location = 'photos.php';
	 
	}


</script>
		
	</div>
</div>

PaulOB · April 12, 2018, 3:11pm

I;m not really seeing the aspect ratio break but I am seeing scrollbars on the img container which is bad.

Maybe try something like this:

body {
	font-family: Arial, sans-serif;
	background: url(http://gautamjhaofficial.in/wp-content/uploads/2016/07/water-drops-2-533x261.jpg) no-repeat;
	background-size: cover;
	height: 100vh;
}
.overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.7);
	transition: opacity 500ms;
	visibility: hidden;
	opacity: 0;
	z-index:1000;
}
.overlay:target {
	visibility: visible;
	opacity: 1;
}
.popup {
	margin: 20px auto;
	padding: 20px;
	background: #fff;
	border-radius: 5px;
	width: 85%;
	position: relative;
	/*transition: all 5s ease-in-out;*/
  z-index:1000;
}
.popup h2 {
	margin-top: 0;
	color: #333;
	font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
	position: absolute;
	top: 20px;
	right: 30px;
	transition: all 200ms;
	font-size: 30px;
	font-weight: bold;
	text-decoration: none;
	color: #333;
}
.popup .close:hover {
	color: #06D85F;
}
#pic {
	max-height: 75vh;
	width:auto;
	height:auto;
	max-width:100%;
}
@media screen and (max-width: 1500px) {
	.popup .content {
		max-height: 30%;
		overflow: auto;
		font-size: 18px !important;
	}
}
@media screen and (max-width: 800px) {
	.popup {
		width: 90%;
	}
	.popup .content {
		max-height: 30%;
		overflow: auto;
		font-size: 10px !important;
	}
	#pic {
		max-height: 50vh;
	}
}

I changed the img rules use max-height and width and width and height:auto:
e.g.

#pic {
	max-height: 75vh;
	width:auto;
	height:auto;
	max-width:100%;
}

It needs testing with different sized images to see if its working properly. It should maintain aspect ratio but of course won’t fill the whole modal as you would need to enlarge and crop to do that.

It would be helpful if you could put up a working demo on codepen (or similar )with your images in place so we can see better what’s happening.

RCDAwebmaster · April 12, 2018, 5:16pm

That works. Thanks much. This mobile responsiveness stuff is still kind of new to me.

How do I keep the popup window from resizing with the image?

ronpat · April 12, 2018, 7:41pm

Did you read Paul’s request for a working demo on CodePen?
AND, would you include a URL to the images?

FYI, I noticed that the image names have a space in them. While they may work at this time, image names with spaces can “break” (which is probably the reason for the space? ). For the record, it is very strongly recommended that image names, just like URLs, not have spaces in them.

PaulOB · April 12, 2018, 7:56pm

As Ron said a demo would help enormously.

I’ve cobbled together most of your code here (apart from the js) so that we can talk about what needs doing. I’ve made the modal fit the image instead of being oversized.

This is only the first draft and needs testing with different sized images of course but I’m finished for the day now

Dr_John · April 13, 2018, 7:47am

Would it not be better to use a tried and tested script that is known to be responsive, works with images of different sizes in the same slideshow, and give no problems?

I’ve used Venobox on a few sites with no problems.

PaulOB · April 13, 2018, 1:58pm

Yes generally there’s no need to re-invent the wheel and there are plenty of good slideshows around.

I suppose it all depends on what features you want or if you want something very simple then coding your own could be worth it (as long as you know what you are doing).

RCDAwebmaster · April 19, 2018, 12:54pm

Since you want a demo, I’m going to give you one: edit: see post #10

Look at the 2014 photos. When you scroll through them you will notice that the popup window resizes with the photo. I’ve tried setting a height on the CSS style popup, but that causes the photo to get cut off even though the window is now longer and has more area for the photo.

TechnoBear · April 19, 2018, 12:57pm

Are you sure the link is correct? I get a “Server not found” error.

RCDAwebmaster · April 19, 2018, 1:11pm

I screwed up the link. it’s http://216.73.18.74:3461/stjosephtheworker/photos2.php

I managed to get it to work on the PC, but on a tablet and cell, the bottom of the image and the image number are missing. It seems that at a smaller screen size the content area for the photo is not resizing properly. It should extend to the bottom of the window. Additionally, I’d like the image number to remain at the bottom of the window.

The div in question is div.content which I set the height of to 100%.

Edit: I found a max-height of 30% that was causing the div to cut off the lower part of the photo. now how to get the image number to stay in a fixed position at the bottom of the window.

TechnoBear · April 19, 2018, 1:34pm

The image number seems to be staying in line with the lower right corner of the image. Is that not what you want?

A bigger problem for me is that the font size decreases at smaller screen sizes, making the titles almost impossible to read.

RCDAwebmaster · April 19, 2018, 1:43pm

I want the image number at the bottom of the window in a fixed position regardless of the image size.

Do I need to use some JavaScript to read the height of the image and div.content and calculate the offset, forcing the image number to be in a fixed position?

Ray.H · April 19, 2018, 2:11pm

You would need to remove it from the page flow, such as with position:absolute;

The styles on that div and the left/right arrow divs are inline styles.

<div id="of" style="position:absolute; bottom:10px; right:10px ;font-size:8pt;">3 of 12</div>

RCDAwebmaster · April 19, 2018, 2:48pm

Thanks a ton Ray.H. That solved the position problem.

I just noticed that despite thinking I was done with this pop up window. On my cellphone in landscape, the window extends down below the end of the window.

Ray.H · April 19, 2018, 3:41pm

Hi,
Pauls’ demo from post #5 seems to resolve that problem.

View it on codepen then click “export” on the bottom right corner to download the zip file.
Run those files from your local machine for further testing.

You will see that he has a max-height on the images that is scaling them to the viewport height.

#pic {
	max-height: 75vh;
	width:auto;
	height:auto;
	max-width:100%;
	border:blue 1px dashed;
	display:block;
}

He also has media queries in there for smaller screen widths.

@media screen and (max-width: 800px) {
	.popup .content {
		font-size: 13px;
	}
	#pic {
		max-height: 50vh;
	}
}

I don’t think there will be a magic bullet that will fix your current modal window as it has fixed heights and overflow:hidden on the .popup.

Your images are not scaling correctly in that set-up since they are only height:auto;
Combined with a wide screen in landscape mode, your image width is still controlling the image height.

system · July 19, 2018, 10:41pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.