How do I align images in a row with equal height? - html

Question

It seems no matter what I do, I cannot get my images to line up in height. Am I missing something? Originally all images were varying sizes, but I adjusted the resolution in a photo editing software so they are all the same height (1500px) and, for added reinforcement, I have put the height in the image tag as well, yet they are still not lining up and seem to retain their original height/size. It is not a file naming issue as I have checked and double checked these are correct.
Is it a max-width vs max-height issue? They either need to line up uniformly in width or in height, and can't be both unless the images are the exact same sizes? This is my HTML and CSS. I am using a framework called "uiKit" (https://getuikit.com/) and have included its applicable CSS in the code below.
html,
body {
margin: 0;
background-size: cover;
}
.wrapper {
margin-top: 75px;
}
nav {
padding: 25px 25px 75px 175px;
}
address,
dl,
fieldset,
figure,
ol,
p,
pre,
ul {
margin: 0 0 0 0!important;
}
li {
list-style-type: none;
}
.nav-wrapper {
display: flex;
justify-content: space-between;
}
.nav-right {
display: flex;
font-size: 0.875rem;
color: #999;
}
.leftnavpadding {
padding: 0px 0px 0px 20px;
}
footer a {
color: purple;
}
/*Photos page*/
.photoswrapper {
margin: 75px;
}
.photo-grid-padding>* {
padding: 0!important
}
.uk-lightbox-toolbar {
padding: 10px 10px;
background: rgba(0, 0, 0, 0.0);
color: rgba(255, 255, 255, 0.7);
}
.uk-lightbox {
background-color: white;
}
#photomenuwrapper {
padding: 10px;
}
h3.photolink:hover,
.photolink:active {
color: white;
}
/*footer*/
footer {
padding: 150px 100px 100px 100px;
}
.footersocial {
width: 100%;
display: flex;
justify-content: center;
}
.uk-child-width-1-2>* {
width: 50%;
}
.uk-grid {
display: flex;
/* 1 */
flex-wrap: wrap;
/* 2 */
margin: 0;
padding: 0;
list-style: none;
}
[class*='uk-inline'] {
/* 1 */
display: inline-block;
/* 2 */
position: relative;
/* 3 */
max-width: 100%;
/* 4 */
vertical-align: middle;
/* 5 */
-webkit-backface-visibility: hidden;
}
<div class="photowrapper">
<div class="photo-grid-padding uk-child-width-1-2#l" uk-grid>
<div>
<a class="uk-inline" href="houses.htm">
<img src="img/houses/houses01.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">houses</h3>
</div>
</a>
</div>
<div>
<a class="uk-inline" href="yangshuo.htm">
<img src="img/yangshuo/yangshuo1.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">yangshuo</h3>
</div>
</a>
</div>
<div>
<a class="uk-inline" href="nature.htm">
<img src="img/nature/nature1.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">nature</h3>
</div>
</a>
</div>
<div>
<a class="uk-inline" href="buildings.htm">
<img src="img/buildings/buildings1.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">buildings</h3>
</div>
</a>
</div>
<div>
<a class="uk-inline" href="lasvegas.htm">
<img src="img/lasvegas/lasvegas1.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">lasvegas</h3>
</div>
</a>
</div>
<div>
<a class="uk-inline" href="tripinterrupted.htm">
<img src="img/tripinterrupted/tripinterrupted2.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">trip interrupted</h3>
</div>
</a>
</div>
<div>
<a class="uk-inline" href="otherstuff.htm">
<img src="img/otherstuff/other1.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">other stuff</h3>
</div>
</a>
</div>
<div>
<a class="uk-inline" href="design.htm">
<img src="img/design/infographic.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">design
<h3>
</div>
</a>
</div>
To let you know: I tried this suggestion:
https://codepen.io/blimpage/embed/obWdgp?default-tab=result&theme-id=dark
and the images lined up perfectly on a test page with no framework added.
But unfortunately when I inserted that solution into my page with the framework, and specifically when I put the display: flex style in the div around my rows in the grid it messed up the alignment of both the framework and the attempted solution, and neither was then working as they should have been.
I have put the HTML and CSS for that attempted solution below.
Any info or knowledge that would make my images align up in their height to create a clean row would help me out. Please if someone could let me know if I am missing something! Also, am a DIY beginner coder, please be gentle with me, I still have lots to learn!
img {
width: 100%;
height: auto;
vertical-align: middle;
}
.picsinarow {
display: inline-flex
}
}
.container {
background: white;
margin: 0 auto;
padding: 5%;
width: 75%;
}
.b1 {
flex: 1.3431
}
.n1 {
flex: 1.3333
}
<div class="photowrapper">
<div class="photo-grid-padding uk-child-width-1-2#l" uk-grid>
<div class="picinarow">
<a class="uk-inline" href="houses.htm">
<img src="img/houses/houses01.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">houses</h3>
</div>
</a>
</div>
<div>
<a class="uk-inline" href="yangshuo.htm">
<img src="img/yangshuo/yangshuo1.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">yangshuo</h3>
</div>
</a>
</div>
<!-- end of pic in a row -->
</div>
<!-- end of photowrapper -->
To be clear, I am no longer using this code as it caused problems once I tried to integrate it into the uikit framework I am using.
Thank you so much!!