Responsive image layout keeping different aspect ratios

Dear all,

Im trying to set up some code to do a responsive layout with images that mix stills & video. There are different aspect ratios to show and I want nothing to crop.

It happens that I am stucked in the following situation:




Every image should pop up in the center of the screen once clicked, as the £100 million jackpot. But the 2nd and 3rd don’t. Can anybody tell me why is it behaving like this?

The code is as follows

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	
	<style type="text/css">
		
		/*Eliminates padding, centers the thumbnail */
		body, html {
		padding: 0;
		margin: 0;
		border: 0 none;
		
		}

		/* Styles the thumbnail */
		a.lightbox img {
		height: 25rem;
		border: 0px solid white;
		box-shadow: 0px 0px 0px rgba(0,0,0,0);
		margin: 94px 10px 0px 0px;
		}

		/* Styles the lightbox, removes it from sight and adds the fade-in transition */
		.lightbox-target {
		position: fixed;/* fixed, absolute */
		top: -100%;
		width: 100%;
		background: rgba(0,0,0,0.7);
		
		opacity: 0;
		-webkit-transition: opacity .5s ease-in-out;
		-moz-transition: opacity .5s ease-in-out;
		-o-transition: opacity .5s ease-in-out;
		transition: opacity .5s ease-in-out;
		overflow: hidden;
		 
		}

		/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */
		.lightbox-target img {
		margin: auto;
		position: absolute;
		top: 0;
		left:0;
		right:0;
		bottom: 0;
		max-height: 0%;
		max-width: 0%;
		border: 0px solid white;
		box-shadow: 0px 0px 8px rgba(0,0,0,.3);
		box-sizing: border-box;
		-webkit-transition: .5s ease-in-out;
		-moz-transition: .5s ease-in-out;
		-o-transition: .5s ease-in-out;
		transition: .5s ease-in-out;
		  
		}

		/* Styles the close link, adds the slide down transition */
		a.lightbox-close {
		display: block;
		width:50px;
		height:50px;
		box-sizing: border-box;
		background: white;
		color: black;
		text-decoration: none;
		position: absolute;
		top: -80px;
		right: 0;
		-webkit-transition: .5s ease-in-out;
		-moz-transition: .5s ease-in-out;
		-o-transition: .5s ease-in-out;
		transition: .5s ease-in-out;
		}

		/* Provides part of the "X" to eliminate an image from the close link */
		a.lightbox-close:before {
		content: "";
		display: block;
		height: 30px;
		width: 1px;
		background: black;
		position: absolute;
		left: 26px;
		top:10px;
		-webkit-transform:rotate(45deg);
		-moz-transform:rotate(45deg);
		-o-transform:rotate(45deg);
		transform:rotate(45deg);
		}

		/* Provides part of the "X" to eliminate an image from the close link */
		a.lightbox-close:after {
		content: "";
		display: block;
		height: 30px;
		width: 1px;
		background: black;
		position: absolute;
		left: 26px;
		top:10px;
		-webkit-transform:rotate(-45deg);
		-moz-transform:rotate(-45deg);
		-o-transform:rotate(-45deg);
		transform:rotate(-45deg);
		}

		/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */
		.lightbox-target:target {
		opacity: 1;
		top: 0;
		bottom: 0;
		overflow:scroll;
		}

		.lightbox-target:target img {
		max-height: 100%;
		max-width: 100%;
		}

		.lightbox-target:target a.lightbox-close {
		top: 0;
		}

		section {
			display: flex;
		}
}

	</style>

</head>
<body>
	<section>
		<div class="box1">
			<a class="lightbox" href="#Euromillions">
			   <img src="euromillions, david harriman, still productions, wyatt clarke jones.jpg"/>
			</a> 
			<div class="lightbox-target" id="Euromillions">
			   <img src="euromillions, david harriman, still productions, wyatt clarke jones.jpg"/>
			   <a class="lightbox-close" href="#"></a>
			</div>
		</div>

		<div class="box2">
			<a class="lightbox" href="#Sorrentino">
			   <img src="Federicosorrentino. East End Girls. Instagram-federicosorrentino_o.jpg"/>
			</a> 
			<div class="lightbox-target" id="Sorrentino">
			   <img src="Federicosorrentino. East End Girls. Instagram-federicosorrentino_o.jpg"/>
			   <a class="lightbox-close" href="#"></a>
			</div>
		</div>

		<div class="box">
			<a class="lightbox" href="#Carlota">
			   <img src="CarlotaOlcina.jpg"/>
			</a> 
			<div class="lightbox-target" id="Carlota">
			   <img src="CarlotaOlcina.jpg"/>
			   <a class="lightbox-close" href="#"></a>
			</div>
		</div>

		

	</section>
	

</body>
</html>

Hello!

You didn’t add the left value of the lightbox-target, which then uses the default value:

Add left: 0; to your .lightbox-target :slight_smile:.

1 Like

Hola Nico!

Thank you for this quick reply-easy solution-chapter to learn on a Wednesday morning. Man, your answer comes in nocking down the door!

Now I know why the following was working without left: 0;

<a class="lightbox" href="#Euromillions">
<img src="euromillions, david harriman, still productions, wyatt clarke jones.jpg"/>
</a>

<div class="lightbox-target" id="Euromillions">
<img src="euromillions, david harriman, still productions, wyatt clarke jones.jpg"/>
<a class="lightbox-close" href="#"></a>
</div>

and was NOT working with the following (required for a responsive “myway” aspect ratio box):

<section>
<div class="box1">

     <a class="lightbox" href="#Euromillions">
     <img src="euromillions, david harriman, still productions, wyatt clarke jones.jpg"/>
     </a>

     <div class="lightbox-target" id="Euromillions">
     <img src="euromillions, david harriman, still productions, wyatt clarke jones.jpg"/>
     <a class="lightbox-close" href="#"></a>
     </div>

</div>
</section>

Muchas gracias!
I will post final result of my personal work presentation
:slightly_smiling_face:

1 Like

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