bartonlewis Posted June 17, 2018 Share Posted June 17, 2018 I found cool code for a magnifying lens on multiple images; but I want to make the images resize on different browser sizes. Since the code relies on defining the size of the image within the image tag, I am not sure how to do this. On the previous version of my page, where I did not use the magnifying lens, I created a class for the image which gave it a width: X% which enabled it be responsive. But that won't work here. Does anybody know of a solution? I am not js-experienced so I would need the code written for me, instead of being told what to do. Sorry, and thanks if anyone can help. <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script type="text/javascript" src="magnifier.js"></script> <script src="https://use.typekit.net/qkv6kzb.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> <script src="https://use.typekit.net/qkv6kzb.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> <meta charset="UTF-8"> <title>Barton Lewis - photography - wall cuts</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> img { width: 100%; height: auto; } /* styles for magnifier image pairs */ .container { display: flex; justify-content: space-around; margin: 2% 0; } .caption { font-family: "europa",sans-serif; text-align: center; font-size: 1.5em; margin: 4% auto 5%; } /* style for the DIV that holds the image pair */ .magnifier { overflow: hidden; position: relative; display: flex; justify-content: space-between; } /* style for the DIV that is the magnifier lens */ .maglens { position: absolute; overflow: hidden; width: 200px; height: 200px; display: flex; justify-content: space-around; } /* style for the small IMG that appears on the page */ .magsmall { position: absolute; border-style: none } /* style for the magnified image, using a clip rectangle */ .maglarge { position: absolute; border-style: none; } /*---------------MEDIA!!!------------*/ @media screen and (max-width: 1366px) { .caption { font-family: "europa",sans-serif; font-size: 1.2em; } } @media screen and (max-width: 768px) { .caption { font-family: "europa",sans-serif; font-size: 1em; } } </style> </head> <body> <div class="container"> <div class="magnifier" style="width: 825px; height: 635px;"> <div class="maglens"> <img src="http://bartonlewisfilm.com/img_157-229_1500.jpg" class="maglarge" style="width: 1500px; height: 1155px;" /> </div> </div> </div> <p class="caption">287-135, Flushing Ave., IND Crosstown Line</p> <div class="container"> <div class="magnifier" style="width: 825px; height: 628px;"> <div class="maglens"> <img src="http://bartonlewisfilm.com/img_157-245_1500.jpg" class="maglarge" style="width: 1500px; height: 1142px;" /> </div> </div> </div> <p class="caption">157-245, 96th St., IND Eighth Ave. Line</p> <div class="container"> <div class="magnifier" style="width: 825px; height: 653px;"> <div class="maglens"> <img src="http://bartonlewisfilm.com/img_162-365_1500.jpg" class="maglarge" style="width: 1500px; height: 1187px;" /> </div> </div> </div> <p class="caption">162-365, 50th St., IND Eighth Ave. Line</p> <script> </script> </body> </html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now