Images being squashed to a 0.5cm line when page loads (only sometimes)

I’m not understanding this. Sometimes my images in the gallery load being squashed to a 0.5cm thick line.

Here’s the page - gallery.html

It usually happens when the page fully loads (without saved cache). After that, it happens a lot less. I think the problem is that when it is being loaded slowly, the images never “stretch out”, even if the page is done loading. You might feel it if you press CTRL + F5.

I’m using a lightbox feature for which I’ll include a css file.

My HTML:

<!DOCTYPE html>
<html>
	<head>
		<title>Rico Barbers Horsham | Professional Hair Salon For Men</title>
		<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
		<link href="lightbox.css" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css?family=Berkshire+Swash" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width">
	</head>
	<body>
		<div class="infoline">
			<div class="container">
				<div class="row">
					<div class="col-md-4">
						<p id="maintitle">Rico Barbers</p>
					</div>
					<div class="col-md-8">
						<ul>
							<li id="phonenumber"><img src="../../images/phone1.png"/><a href="tel:+447490317132"><p>07490317132</p></a></li>
							<li id="location"><img src="../../images/mapmarker1.png"/><a href="https://goo.gl/maps/PoxmYpEvG8o" target="_blank"><p>2 The Parade, Caterways, Horsham RH12 2AL</p></a></li>
							<li id="location2"><img src="../../images/mapmarker1.png"/><a href="https://goo.gl/maps/PoxmYpEvG8o" target="_blank"><p>2 The Parade, RH12 2AL</p></a></li>
							<li id="openingtimes"><img src="../../images/time1.png"/><p>Mon-Sat: 09:00 - 18:00</p></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="header">
			<div class="container">
				<div class="col-md-12">
					<ul>
						<a href="../../index.html"><li>Home</li></a>
						<a href="#"><li>Gallery</li></a>
						<a href="../prices/prices.html"><li>Prices</li></a>
						<a href="../contact/contact.html"><li>Contact</li></a>
					</ul>
				</div>
			</div>
		</div>
		<div class="body">
			<div class="container">
				<div class="images">
					<div class="row">
						<a href="../../images/gentleman1.jpg" data-lightbox="ricobarbers"><img src="../../images/gentleman1.jpg"/></a>
						<a href="../../images/gentleman2.jpg" data-lightbox="ricobarbers"><img src="../../images/gentleman2.jpg"/></a>
						<a href="../../images/gentleman3.jpg" data-lightbox="ricobarbers"><img src="../../images/gentleman3.jpg"/></a>
						<a href="../../images/gentleman4.jpg" data-lightbox="ricobarbers"><img src="../../images/gentleman4.jpg"/></a>
						<a href="../../images/gentleman5.jpg" data-lightbox="ricobarbers"><img src="../../images/gentleman5.jpg"/></a>
						<a href="../../images/gentleman6.jpg" data-lightbox="ricobarbers"><img src="../../images/gentleman6.jpg"/></a>
						<a href="../../images/gentleman7.jpg" data-lightbox="ricobarbers"><img src="../../images/gentleman7.jpg"/></a>
						<a href="../../images/gentleman8.jpg" data-lightbox="ricobarbers"><img src="../../images/gentleman8.jpg"/></a>
						<a href="../../images/ricoBarbersInside.jpg" data-lightbox="ricobarbers"><img src="../../images/ricoBarbersInsideThumbnail.jpg"/></a>
						<a href="../../images/ricoBarbersOutside.jpg" data-lightbox="ricobarbers"><img src="../../images/ricoBarbersOutsideThumbnail.jpg"/></a>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="container">
				<p>Copyright © 2018 by Rico Barbers</p>
			</div>
		</div>
		<script src="lightbox-plus-jquery.js"></script>
	</body>
</html>

My normal css file:

.infoline {
	background-color: black;
	color: white;
	padding-top: 15px;
	padding-bottom: 10px;
	border-bottom: 2px solid #a38763;
}

.infoline ul {
	list-style-type: none;
	display: inline-block;
	margin-top: 20px;
}

.infoline ul li {
	display: inline-block;
	margin-right: 20px;
}

.infoline img {
	width: 20px;
	display: inline-block
}

.infoline ul li a {
	color: white;
}

.infoline #location p, .infoline #location2 p {
	margin-left: 4px;
}

.infoline ul li p {
	display: inline-block;
	margin-left: 7px;
}

#maintitle {
	font-family: 'Berkshire Swash', cursive;
	font-size: 40px;
}

.header {
	border-bottom: 2px solid #a38763;
	background-color: black;
}

.header ul {
	list-style-type: none;
	text-align: center;
	padding: 0;
	margin: 0;
	margin-top: 13px;
	margin-bottom: 10px;
}

.header ul li {
	display: inline-block;
	padding-left: 20px;
	padding-right: 20px;
	font-size: 22px;
	padding: 0 10px 0 10px;
	margin-top: -10px;
	margin-bottom: -10px;
	transition: background-color 0.5s ease;
	font-family: 'Josefin Sans', sans-serif;
}

.header a {
	color: white;
	margin-right: 40px;
	margin-left: 40px;
}

.header ul li:hover {
	text-decoration-style: none;
}

.header ul a:hover {
	color: #a38763;
}

.header ul a:focus {
	color: #a38763;
}

.header ul a:active {
	color: #a38763;
}

#location2 {
	display: none;
}

.body {
	background: url(../../images/hairmodel2.jpg);
	background-size: cover;
	background-position: center center;
	padding-top: 200px;
	padding-bottom: 200px;
}

.images img {
	width: 200px;
	height: 100%;
	text-align: center;
	margin-left: 5px;
	margin-right: 5px;
	border: 2px solid #a38763;
}

.images a {
	margin-bottom: 10px;
}

.images {
	text-align: center;
}

.images .row {
	display: flex;
	justify-content: center;
	flex-flow: row wrap;
}

.footer {
	background-color: black;
	border-top: 2px solid #a38763;
	color: white;
	text-align: right;
	border-bottom: 2px solid #a38763;
}

.footer p {
	margin-top: 30px;
	margin-bottom: 30px;
}

@media only screen and (max-width: 991px) {
	#maintitle {
		text-align: center;
	}

	.header ul li {
		display: block;
		margin-bottom: 5px;
	}

	.header ul a:hover {
		text-decoration: none;
	}

	.header ul a:focus {
		text-decoration: none;
	}

	.header ul {
		margin: 0 auto;
		margin-bottom: -15px;
		text-align: center;
	}
}

@media only screen and (max-width: 422px) {
	#location {
		display: none;
	}

	#location2 {
		display: inline-block;
	}
}

@media only screen and (max-width: 433px) {
	.header ul li {
		display: block;
	}
}

@media only screen and (min-width: 546px) and (max-width: 740px) {
	.infoline .row .col-md-8 {
		text-align: center;
	}
}

@media only screen and (max-width: 629px) {
	.body {
		padding-top: 75px;
		padding-bottom: 75px;
	}
}

Lightbox css file:

html.lb-disable-scrolling {
  overflow: hidden;
  /* Position fixed required for iOS. Just putting overflow: hidden; on the body is not enough. */
  position: fixed;
  height: 100vh;
  width: 100vw;
}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  max-height: none;
  border-radius: 3px;

  /* Image border */
  border: 4px solid white;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 4px;

  /* Background color behind image.
     This is visible during transitions. */
  background-color: white;
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../images/loading.gif) no-repeat;
}

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url(../images/prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url(../images/next.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 4px;
  color: #ccc;
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-caption a {
  color: #4ae;
}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(../images/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

I never had this problem when the website was simply on my computer. Only when I put it on the hosting server I started having this issue. At first I was super puzzled because, well, it doesn’t make sense. Now I think I understand something about the problem, it only happens when the page actually takes some time to load, which is going to happen when it isn’t sitting simply on your computer anymore. I don’t know. It’s like it starts loading them, but never finishes.

Any ideas? I’m pretty lost.

OF COURSE I FIND A SOLUTION RIGHT AFTER I POST!.. (facepalm)

So what I did was I changed the css for the img. I had it put at width: 200px; height: 100%; I never really found anybody asking the same question in the same circumstances, but I tried things around and I’ve kinda fixed it. First, I changed the height to “auto”, but then not all of the images were the same size. Next I changed the height to a fixed number (260px) and everything works smoothly.

But If anyone can help me, I’ve still got a question. Why did this happen with “height: 100%”? I didn’t think of changing it before, as I didn’t think it could be the cause of the problem. What If I wanted my images were bigger and I wanted them responsive? What would I do then?

P.S. Even though I still do actually have a question to ask, I completely I understand if the mods want to delete this whole post.