htmlcssresponsiveimage-scaling

Responsive images different sizes

I've tried searching for this, but could not find a close enough issue. I have a responsive web site, that looks great on a PC, but on mobile, the images of the gallery are all different sizes. The actual images are all identical sizes, but mobile seems to make them grow as they go. Tested on Android and iPhone. Screenshots: Site on PC Site on Android & Site on iPhone The image codes are thus:

@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}
img { max-width: 100%; height: 100%; }
@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}
<tr><td align="center" valign="middle"><a href="/Portfolio/Weddings/Bridal_Shoot/index.html" target="_blank"><img src="/images/weddings/Bridal_Shoot.jpg" alt="Click on image to open gallery" width="235" height="352" class="z-depth-2 rounded-circle img-fluid"/><BR>Bridal Shoot</a></td>
            <td align="center" valign="middle"><a href="/Portfolio/Weddings/Butler_Wedding/index.html" target="_blank"><img src="/images/weddings/Butler_Wedding.jpg" alt="Click on image to open gallery" width="235" height="352" class="z-depth-2 rounded-circle img-fluid"/><BR>Butler Wedding</a></td>
            <td align="center" valign="middle"><a href="/Portfolio/Weddings/Engagement_Session/index.html" target="_blank"><img src="/images/weddings/Engagement_Session.jpg" alt="Click on image to open gallery" width="235" height="352" class="z-depth-2 rounded-circle img-fluid"/><BR>Engagement Session</a></td>
            <td align="center" valign="middle"><a href="/Portfolio/Weddings/Fluke–Chenault_Wedding/index.html" target="_blank"><img src="/images/weddings/Fluke–Chenault_Wedding.jpg" alt="Click on image to open gallery" width="235" height="352" class="z-depth-2 rounded-circle img-fluid"/><BR>Fluke–Chenault Wedding</a></td></tr>
What am I missing here? Any help would be great. (I've tried using Bootstrap, but it made other images used on the page distorted).

Solution

  • Here is an example of a responsive layout for the elements included in your question.

    Please note - this is just an example of what you can do with CSS responsive features, properties and units.

    I have included a @media query which reduces the number of columns from 4 to 2 at a breakpoint of 600px.

    To demonstrate an array of what's possible I have also used responsive units:

    a responsive property:

    a responsive display:

    and a responsive function:

    Working Example:

    .gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: min(100%, 960px);
  margin: 0 auto;
}

.gallery-link {
  display: block;
  flex: 0 0 22%;
  margin-bottom: 3%;
  line-height: 1.5;
  font-size: min(16px, 3vw);
  text-align: center;
  outline: 1px solid rgb(255, 0, 0);
}

.gallery-figure {
  display: block;
  width: 100%;
  margin: 0;
}

.gallery-image {
  display: block;
  width: 100%;
  border: 1px solid rgb(0, 0, 255);
  border-radius: 50%;
  aspect-ratio: 235/352;
}

@media screen and (max-width: 600px) {
  .gallery-link {
    flex: 0 0 44%;
  }
}
    <div class="gallery">

  <a class="gallery-link" href="/Portfolio/Weddings/Bridal_Shoot/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Bridal_Shoot.jpg" title="Click on image to open gallery" alt="Bridal Shoot" />
    </figure>
    <figcaption>Bridal Shoot</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Butler_Wedding/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Butler_Wedding.jpg" title="Click on image to open gallery" alt="Butler Wedding" />
    </figure>
    <figcaption>Butler Wedding</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Engagement_Session/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Engagement_Session.jpg" title="Click on image to open gallery" alt="Engagement Session" />
    </figure>
    <figcaption>Engagement Session</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Fluke–Chenault_Wedding/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Fluke–Chenault_Wedding.jpg" title="Click on image to open gallery" alt="Fluke–Chenault Wedding" />
    </figure>
    <figcaption>Fluke–Chenault Wedding</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Bridal_Shoot/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Bridal_Shoot.jpg" title="Click on image to open gallery" alt="Bridal Shoot" />
    </figure>
    <figcaption>Bridal Shoot</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Butler_Wedding/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Butler_Wedding.jpg" title="Click on image to open gallery" alt="Butler Wedding" />
    </figure>
    <figcaption>Butler Wedding</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Engagement_Session/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Engagement_Session.jpg" title="Click on image to open gallery" alt="Engagement Session" />
    </figure>
    <figcaption>Engagement Session</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Fluke–Chenault_Wedding/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Fluke–Chenault_Wedding.jpg" title="Click on image to open gallery" alt="Fluke–Chenault Wedding" />
    </figure>
    <figcaption>Fluke–Chenault Wedding</figcaption>
  </a>

</div>