I apologize if this question has already been addressed, but I have been unable to find a solution that works for my specific issue.
My Gallery consists of a side list of available images in one section, which when clicked changes the image source in another section using JavaScript. The sizes of all sections are specified in percentages to ensure responsiveness across different resolutions.
Below is the relevant stylesheet:
#ActiveView {
position: absolute;
left: 1%;
right: 1%;
margin-top: 1%;
height: 97%;
background: url('../img/alpha/222.png');
background-size: 100%;
background-repeat: no-repeat;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#ThePicture {
position: absolute;
height: 100%;
max-width: 100%;
}
Here, #ThePicture refers to the id of the image that requires assistance.
The document structure is as follows:
<div id="ViewPort">
<div id="ActiveViewWrap">
<div id="ActiveView">
<img id="ThePicture" src="../img/gallery/TeaPlant.jpg">
<div id="OrigSizeLinker"> Full Size </div>
</div>
</div>
<div id="ActiveNoteWrap">
<div id="ActiveNote">contentNote</div>
</div>
</div>
I am seeking a way to maintain the aspect ratio of #ThePicture so that the image does not appear distorted on widescreen resolutions.