Responsive images different sizes-CodePudding

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" /><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" /><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" /><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" /><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).

CodePudding user response：

https://youtu.be/tmWvwp3rpso

Please check above the link, you will get the solutions for the image responsive and also check the border-radius property for circle image

CodePudding user response：

Well with w: 100% i h: 100% you told your image to scale max w and h on container, just use width: 100%. I use always some container than put img inside as background so i use backgroun-position and background-size: cover; after that you manipulate just with container width and height, and with background-positon you target what part of image you want to show if img is too big for mobile , you can also use transform : scale to zoom in

CodePudding user response：

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:

%
vw

a responsive property:

aspect-ratio

a responsive display:

display: flex

and a responsive function:

min()

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 >

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

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

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

  <a  href="/Portfolio/Weddings/Fluke–Chenault_Wedding/index.html" target="_blank">
    <figure >
      <img  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  href="/Portfolio/Weddings/Bridal_Shoot/index.html" target="_blank">
    <figure >
      <img  src="/images/weddings/Bridal_Shoot.jpg" title="Click on image to open gallery" alt="Bridal Shoot" />
    </figure>
    <figcaption>Bridal Shoot</figcaption>
  </a>

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

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

  <a  href="/Portfolio/Weddings/Fluke–Chenault_Wedding/index.html" target="_blank">
    <figure >
      <img  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>