multiple size definitions for modal images

[bartonlewis]

I found code for opening thumbnails using modal images at w3schools here:  https://www.w3schools.com/howto/howto_css_modal_images.asp

This code works well for me except for one problem:  while most of the images display well on screen defining a width of 60%, which enables the image to fill the screen top to bottom, some of the images are panoramas and this 60% width restriction creates very short images top to bottom.  I would like a separate definition for the panoramas that enables them to fill 90% of the width of the screen.  I am not an experienced javascript user so I don't know how to do this.  Can anyone help?  I have attached the file with html, css and js in it.  Thank you.

so.html

[justsomeguy]

Why do you want to use Javascript for that?  If you're listing out the images yourself in the HTML, then you can assign a different CSS class to images that you want to display differently.

[dsonesuk]

Because the thumbnail image src upon clicking is copied to the single modal image src, and depending on modal content width and height determines the height and width styling for the image to use to fit proportionately. If you set the proportionate class to the individual images, you would still need JavaScript to copy that class as well to the single modal image.

By the way, this is a duplicate topic http://w3schools.invisionzone.com/topic/57790-multiple-widthheight-values-for-modal-images/?tab=comments#comment-317159

 

[bartonlewis]

Are duplicate postings not allowed?  I don't see that listed in guidelines/netiquette.  I posted it here because I didn't get an answer to my last post on the css page, which was basically to ask someone to modify the code I had provided to show me what I needed to do.  I am not sufficiently versed in javascript to do this, athough I attempted it.  I thought perhaps the query was more suited to the JavaScript page, which is why I duplicated it here.