Responsive images different sizes - html

Question

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"><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</td>
<td align="center" valign="middle"><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</td>
<td align="center" valign="middle"><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</td>
<td align="center" valign="middle"><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</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).

Answer 1

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 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>

Answer 2

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

Answer 3

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