How to adjust the size of my figure here? - html

Question

I am new to HTML and CSS and I am working on a Page here for school.
I don't know how i can adjust the size of my figures Schutzklasse 1-3 with their Text. If you Zoom the text gets smaller but the basic picture not.
You dont need everything in the CSS because i have more pages. I just need help on my main page.
I tried things like width or margin and text align but it didn't work. I don't know what to do then.
I hope u can help me.
figure,
figcaption {
margin: 0;
padding: 0;
}
.gallery {
display: block;
text-align: center;
}
#gallery {
display: grid;
grid-template-columns: repeat(3, minmax(7em, 1fr));
gap: 10%;
text-align: center;
margin-left: 10%;
margin-right: 10%;
}
#gallery figure {
position: relative;
color: black;
background: white;
}
figure img {
width: 100%;
position: relative;
display: block;
}
#gallery>figure>figcaption {
position: absolute;
bottom: 0em;
width: 100%;
line-height: 2.1em;
color: white;
background: rgba(0, 0, 0, 0.7);
}
#gallery>figcaption {
grid-column: 1 / -1;
}
#gallery>figure>figcaption {
opacity: 0.4;
bottom: -3em;
transition: all 0.1s ease;
}
#gallery>figure:hover>figcaption {
opacity: 1;
bottom: -2em;
}
.m1 {
border: 3px solid #4CAF50;
padding: 5px;
margin-left: 15%;
margin-right: 15%;
margin-top: 5%;
margin-bottom: 5%;
}
.img1 {
float: right;
}
.m1::after {
content: "";
clear: both;
display: table;
}
.img1 {
height: 30%;
width: 300px;
margin-top: 2%;
margin-bottom: 4%;
margin-left: 4%;
}
.ans1 {
display: inline-block;
width: 320px;
padding: 20px;
border: 5px solid gray;
margin: 10px;
}
.a1 {
margin-left: 15%;
margin-right: 15%;
}
h2 {
margin-left: 3%;
}
ul {
margin-left: 5%;
margin-top: 8%;
}
body {
color: rgba(50, 50, 50, 1.0);
background: rgba(200, 200, 200, 0.825);
}
h1 {
text-decoration: underline;
text-decoration-color: blueviolet;
text-align: center;
margin-bottom: 2em;
}
b {
text-decoration: underline;
}
h3 {
text-shadow: 2px 2px rgb(255, 255, 255);
text-align: center;
margin-bottom: 2em;
}
h4 {
text-decoration: underline;
text-align: center;
margin-bottom: 2em;
}
<h1>Der VDE Guide</h1>
<p> </p>
<h3>Bitte wählen Sie eine der Schutzklassen:</h3>
<div class="gallery">
<figure id="gallery">
<figure>
<a href="messungSK1.1.html">
<img id="sk1" src="schutzklasse1.png">
</a>
<figcaption>Schutzklasse 1</figcaption>
</figure>
<figure>
<a href="messungSK2.1.html">
<img id="sk2" src="schutzklasse2.png">
</a>
<figcaption>Schutzklasse 2</figcaption>
</figure>
<figure>
<a href="messungSK3.1.html">
<img id="sk3" src="schutzklasse3.png">
</a>
<figcaption>Schutzklasse 3</figcaption>
</figure>
</figure>
</div>

Answer 1

[Ctrl-MouseScroll] or [Ctrl+]/[Ctrl-] (browser functionality) act differently compared to resizing the browser. Using the [Ctrl] zooming functions, the browser will act as if it is a different (larger/smaller) device, while resizing the the browser window just changes the available space on the given device (for now, I'm assuming your development desktop PC). This means that when you deeply zoom-in you are essentially looking at a very large smartphone.
With your CSS img {...width: 100%... } you want to scale the images to fill the maximum of the available space (on a very large smartphone), while you want the zooming to literally resize them. I don't know the technical specifics behind this, but you simply cannot have both.
So you need to choose either resize to fit and discard the zooming, or enable zooming and leave out the img {...width: 100%... } and replace it with:
figure img {
display: block; /* removes unwanted space below (default 'inline') */
object-fit: cover; /* resize and clip when too large (change to your needs) */
max-width: 100%; /* dont' go outside parent ('overflow: hidden' won't work) */
margin: 0 auto /* center horzontally in parent */
}
I have created a snippet with your code in which I added my solution, but also changed/simplified a few things:
for clarity removed unused CSS
also for clarity, moved EYE-CANDY only properties to their own section. Less optimized, but more clear CSS for the demo.
heavily commented CSS where applicable
you used <figure>s inside a <figure>, while totally legal, it unnecessarily complicated the structure of .gallery. I removed the extra layer.
changed the original grid-template-columns 3 to auto-fit so the grid nicely wraps when the viewport becomes too narrow.
corrected the gap error to grid-gap
changed the .gallery margins to padding and used margin to horizontally center .gallery
changed background to background-color where applicable. While background is legal, it is also a shortcut property for various background settings. This becomes particularly important when you want to blend/mix background-color with background-image. In specific cases background overrides one of them (depending on how you defined the CSS) obfuscating a nice little bug that could keep you busy for a while. Just get used to using background-color.
Do try out <body outlines="1"> as you will learn from the output that you have overlapping elements issues that might need to be addressed!
And the zooming now works as you want...
The snippet
/* for debugging */
[outlines="1"] * { outline: 1px dotted }
figure,figcaption { margin: 0; padding: 0 }
figure img {
display: block; /* removes unwanted space below (default 'inline') */
object-fit: cover; /* resize and clip when too large (change to your needs) */
max-width: 100%; /* dont' go outside parent */
margin: 0 auto /* center horzontally in parent */
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(7em, 1fr)); /* changed 3 to 'auto-fit' */
/* original 7em, now in pct of 1920 (average desktop) => 7 * 16 / 19.2 */
grid-gap: 10%; /* MOD, was 'gap' */
text-align: center;
padding: 0 10%; /* 10% L/R space */
margin: 0 auto /* center in parent */
}
.gallery figure {
position: relative;
/* some spacing after wrap */
margin-bottom: 2em; /* modify to your needs */
}
.gallery>figure>figcaption {
position: absolute;
width: 100%;
line-height: 2.1em;
color: white;
background: rgba(0, 0, 0, 0.7);
bottom: -3em; opacity: 0.4;
transition: all 0.1s ease;
}
.gallery>figure:hover>figcaption {
bottom: -2em; opacity: 1;
}
/******************/
/* EYE-CANDY only */
/******************/
.gallery figure {
color: black; background-color: white;
}
.gallery>figure>figcaption {
color: white; background-color: rgba(0, 0, 0, 0.7);
}
body {
color: rgba(50, 50, 50, 1.0); background-color: rgba(200, 200, 200, 0.825);
}
h1 {
text-decoration: underline;
text-decoration-color: blueviolet;
text-align: center;
margin-bottom: 2em;
}
h3 {
text-shadow: 2px 2px rgb(255, 255, 255);
text-align: center;
margin-bottom: 2em;
}
<body outlines="0">
<h1>Der VDE Guide</h1>
<p> </p>
<h3>Bitte wählen Sie eine der Schutzklassen:</h3>
<div class="gallery">
<figure>
<a rel="noopener" target="_blank" href="messungSK1.1.html">
<img id="sk1" src="https://via.placeholder.com/200/DC143C/FFF8DC?text=schutzklasse1">
</a>
<figcaption>Schutzklasse 1</figcaption>
</figure>
<figure>
<a rel="noopener" target="_blank" href="messungSK2.1.html">
<img id="sk2" src="https://via.placeholder.com/200/7CFC00/000000?text=schutzklasse2">
</a>
<figcaption>Schutzklasse 2</figcaption>
</figure>
<figure>
<a rel="noopener" target="_blank" href="messungSK3.1.html">
<img id="sk3" src="https://via.placeholder.com/200/6495ED/FFF8DC?text=schutzklasse3">
</a>
<figcaption>Schutzklasse 3</figcaption>
</figure>
</div>
</body>