As part of my Photo Library project, I am designing a display page that showcases four key attributes of each photo - File Name, Title, Date Taken, and Photographer Name. Additionally, there will be a preview thumbnail of the photo itself. While I aim for a consistent look, the challenge arises when dealing with both landscape and portrait images. The landscape images maintain consistency, but the portrait ones stretch out the spacing between attribute rows, disrupting the overall appearance.
If you'd like to view the sample code, it can be accessed on JSFiddle at the following link: https://jsfiddle.net/tsmolskow/37hkszbq/61/
Below is an excerpt of the HTML and CSS code:
<style>
.right-Padding{
padding-right: 10px;
}
img.resize {
width: 50%;
height: 50%;
max-height: 125px;
}
</style>
<table style='font-size:15px'>
... (HTML Code continues)
CSS Code:
.right-Padding{
padding-right: 10px;
}
img.resize {
width: 50%;
height: 50%;
max-height: 125px;
}