Небольшая настройка вашего CSS может дать желаемый результат.Установите max-width (уже, чем полная ширина) и поле, которое будет устанавливать его соответствующим образом (в этом случае я дал ему максимальную ширину 75% и поле слева и справа 10% [приближение, принимая во внимание браузердобавляем поля / отступы] и устанавливаем значение display:block с position:absolute, сверху 20%. Любое из этих значений может быть изменено по вашему желанию, но вы получите изображение. Я бы рекомендовал использовать шрифт меньшего размерав пользу маленьких экранов, по
Надеюсь, это поможет
//Make older browsers aware of new HTML5 layout tags
'header nav aside article footer section'.replace(/\w+/g, function(n) {
document.createElement(n)
})
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
/*styling for gallery page images*/
* {
box-sizing: border-box;
}
/*The grid: Four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
height: 200px;
overflow: hidden;
}
/*Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
max-width: 100%;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container-gallerypage {
position: relative;
display: none;
padding: 15px;
text-align: center;
}
/* Expanding image text */
#imgtext {
display: block;
max-width:75%;
position: absolute;
top:20%;
text-align:center;
margin:0 10%;
color: red;
font-size: 20px;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
/*styling for footer and footer text links*/
footer {
background-color: #6e6b5c;
color: white;
font-family: "Days One", sans-serif;
font-size: .8em;
text-align: center;
padding: 10px;
border: solid 3px #194a76;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
/*@media only screen and (max-width: 320px) {
.footer {
background-image: url(https://kehilalinks.jewishgen.org/images/KehilaLinksLogo.transparent.png);
}
}*/
a.footerlinks {
color: white;
font-weight: 600;
text-decoration: none;
}
a.footerlinks:link,
a.footerlinks:visited {
color: white;
}
a.footerlinks:hover,
a.footerlinks:active {
color: #194a76;
text-decoration: underline;
}
<body>
<article role="main">
<header>
<h1>THE GALLERY</h1>
<p style="font-style: italic; text-align: center;">Click on an image to read the caption and to view a larger version below.</p>
</header>
<!-- slide gallery -->
<!-- The four columns -->
<div class="row">
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/20.jpg" alt="The Eli Lechtzer Family, circa 1915. (L - R, seated) Chana Butzarsky Lechtzer, Raizel (Rose) Lechtzer, Eli Lechtzer, and Golda Lechtzer (standing). If there is lots of text for an image how do I keep it within the image or have it offset to the right side and keep the image on the left side. If there is lots of text for an image how do I keep it within the image or have it offset to the right side and keep the image on the left side.
" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/2.jpg" alt="Sisters of Stavisht" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/6.jpg" alt="Four girls" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/22.jpg" alt="Raizel Lechtzer, circa 1917. Raizel, wearing her school uniform, is about 7 years old in this photo." style="width:100%" onclick="myFunction(this);">
</div>
</div>
<div class="row">
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/20.jpg" alt="The Eli Lechtzer Family, circa 1915. (L - R, seated) Chana Butzarsky Lechtzer, Raizel (Rose) Lechtzer, Eli Lechtzer, and Golda Lechtzer (standing).
" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/2.jpg" alt="Sisters of Stavisht" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/6.jpg" alt="Four girls" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/22.jpg" alt="Raizel Lechtzer, circa 1917. Raizel, wearing her school uniform, is about 7 years old in this photo." style="width:100%" onclick="myFunction(this);">
</div>
</div>
<div class="container-gallerypage">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:80%">
<div id="imgtext" style="text-align: center;width:100%;"></div>
</div>
</article>
<br>
<!-- Footer -->
<footer id="footerlogo" role="contentinfo">
<p>This site is hosted at no cost to the public by
<a class="footerlinks" href="https://jewishgen.org">JewishGen, Inc.</a>, a non-profit corporation. If you feel there is a benefit to you in accessing this site, please consider supporting our important work through
<a class="footerlinks" href="https://jewishgen.org/JewishGen-erosity">JewishGen-erosity</a>. Visit the
<a class="footerlinks" href="https://kehilalinks.jewishgen.org">JewishGen KehilaLinks</a> website to discover other communities.</p>
<p>Copyright ©2012-2019. All rights reserved. Design and website by Vivian Linderman.
<address>
<a class="footerlinks" href="mailto:vivian_lbdn@hotmail.com">CONTACT WEBMASTER</a>
</address>Created 2012, updated 2019.
</footer>
</body>