[RbnJrg]

Originally Posted by swepub

Here it is - ugly coding since I'm new to this and inherit the code from Indesign:

<figure class="wrapper">
<figcaption class="caption"><p class="ImageCaptionCentered"><span class="Semi-Bold">Original Photos</span></p></figcaption>
<div class="_idGenObjectLayout-4">
<div id="_idContainer463" class="MainImage">
<img alt="" src="image/84-4.jpg" />
</div>
</div>
</figure>

<figure class="wrapper">
<figcaption class="caption"><p class="ImageCaptionCentered"><span class="Semi-Bold">Virtual Copies</span></p></figcaption>
<div class="_idGenObjectLayout-4">
<div id="_idContainer463" class="MainImage">
<img alt="" src="image/84-5.jpg" />
</div>
</div>
</figure>

<figure class="wrapper">
<figcaption class="caption"><p class="ImageCaptionCentered"><span class="Semi-Bold">Videos</span></p></figcaption>
<div class="_idGenObjectLayout-4">
<div id="_idContainer463" class="MainImage">
<img alt="" src="image/84-6.jpg" />
</div>
</div>
</figure>

________________________________________

CSS

/* image wrapper for captions */
.wrapper {
float: left;
width: 100%;
text-align: center;
-webkit-column-break-inside: avoid !important;
page-break-inside: avoid !important;
break-inside: avoid !important;
}
.wrapper img {
width: 100%; /* or the width you wish */
display: block;
}
.caption {
font-size: 1rem; /* or the size you wish */
font-style: italic; /* ad libitum */
}


div._idGenObjectLayout-4 {
text-align:center;
-webkit-column-break-inside: avoid !important; /* for webkit ereaders */
break-inside: avoid !important; /* for the rest of ereaders */


#_idContainer463 {
display:inline-block;
width:23.72%;

div.MainImage {
border-style:solid;
box-shadow: 14px 14px 10px rgba(0, 0, 0, 0.6);
margin-bottom:0.5em;
max-width: 99%;
max-height: 99%;
}

Phew! What a mess! Very ugly Indesign is not able to generate a decent code. Use the following:

a) In your .xhtml file:

  <figure class="wrapper">
    <figcaption class="caption ImageCaptionCentered Semi-Bold">Original Photos</figcaption>

    <div class="MainImage">
      <img alt="" src="image/84-4.jpg"/>
    </div>
  </figure>

  <figure class="wrapper">
    <figcaption class="caption ImageCaptionCentered Semi-Bold">Virtual Copies</figcaption>

    <div class="MainImage">
      <img alt="" src="image/84-5.jpg"/>
    </div>
  </figure>

  <figure class="wrapper">
    <figcaption class="caption ImageCaptionCentered Semi-Bold">Videos</figcaption>

    <div class="MainImage">
      <img alt="" src="image/84-6.jpg"/>
    </div>
  </figure>

b) In your .css stylesheet:

.wrapper {
  float: left;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  -webkit-column-break-inside: avoid !important;
  page-break-inside: avoid !important;
  break-inside: avoid !important;
  margin: 1em 0 0; /* Here you control the gap between images; change 1em as you wish */
}

.caption {
  font-size: 1rem;
  font-style: italic;
}

.MainImage {
  width: 23.72%;
  border-style: solid;
  box-shadow: 14px 14px 10px rgba(0, 0, 0, 0.6);
  margin: 0 auto;
  box-sizing: border-box;
}

.MainImage img {
  width: 100%;
}

I still used styles "ImageCaptionCentered" and "Semi-Bold" but they are not defined in you .css. So, if they are not present in your stylesheet, you can delete them and instead of:

<figcaption class="caption ImageCaptionCentered Semi-Bold">

you can use:

<figcaption class="caption">

And now one last thing; the three images, must be joined? That is, a break can't be produced between them? Because the code is different is a break is allowed or not. The above code allows a break between the three images (what the above code makes is to maintain the caption joined with the images, but not the three images joined. For the latter, something more is needed.)