If, in the same structure, one could apply something like:
<img
width= 30vw
height= 28vw
...
>
in both occurences, it would be perfect for the purpose, achieving an indentical look, now controllable by units of vw (in this example).
Only, HTML/CSS-wise, this cannot be done…
No you would never (rarely) do something like that as an image has an intrinsic aspect ratio and the height and width must be maintained at a correct aspect ratio which cannot be achieved by using both width and height together when based on a flexible measurement (excluding object-fit for the time being as you don’t want to crop the image in any way).
What you would usually do is give the image a percentage width based on either its container or the viewport and the image height would be set to auto which will maintain the aspect ratio of the image. You should never squash an image from its original aspect ratio unless its just a wild pattern of sorts.
It has width based on the viewport and also a min and max width to stop it getting too big or too small. At all times the height must remain at auto.
I’ve added it to the codepen here:
Not also that I use a page-wrap div with a max-width to stop the page filling the viewport because on my 27" imac that would leave one long line of text that is impossible to scan. Its not always about the size of the layout but the size of the items in the layout and you can’t have long lines of text endlessly filling the viewport. Imagine on a 50" TV trying to read multiple lines of text that stretch from end to end. If you do some research you will soon see a lot of advice on what readable line lengths should be and what size the text should be
And how it helped - thank you!
The main points you mentioned are understood basically - sorry for my incomplete knowhow regarding sizes causing confusion…
A last Pencode is ready now, including the proposed control of the relative width of the figure.
Before finally closing the topic, two questions are remaining in my poor brain:
in .summary-top {…}, align-content: center seems non-effective
How could this be done differently?
regarding .summary-top i{margin-left:.2rem; font-style:normal;}
I don’t even have a clue as to what the ‘i’ in above declaration could mean?
Furthermore, I was not able to see an effect of the declaration (for testing-purpose, it is deleted in the actual CodePen)
Well spotted it should be align-items:center and refers to the vertical alignment.
.summary-top{
display:flex;
align-items:center;
}
That will vertically align the symbol to the middle of the text. (If you wanted horizontal alignment then that rule above would require justify-content:center as well.)
In my code I used the <i> element (it means italic but has no real semantic significance these days) to hold the word ‘animation’.
Therefore the style that I used .summary-top i {margin-left:.2rem; font-style:normal;} was just to add a little space to the left of that word (animation) in my design. (you used a non breaking space to get the gap but I avoid those and you missed the closing semi-colon anyway ;))
Also in your page you have just gone and made up your own html tags !!!
All is so fine now, except for the horizontal centering of the details within/relative to the figcaption. I clearly must be doing something wrong. Have tried to apply
The align- values refer to vertical alignment on the default row display of flex and the justify- properties refer to the horizontal alignment. (If using flex-direction-column then both of those become reversed.)
Thanks, was overseeing this in the maze of sooo many sizes around - it’s perfectly alright for the actual stage now.
Now have additionally implemented srcset along with 1x, 2x screen resolutions and want to post a conclusion with final sample code (SitePoint & one-page raw codes including links to images).asap.
Regards
Uli
P.S.:
Since the topic-title can’t be edited any more, the widely extended content of the topic isn’t reflected there properly. As soon as the final sample is available, one may see what to do best.
Hello,
since I promised to upload at the least a pre-final version of what has been achieved - here it is. Sadly not well cleaned up - there are so many other priorities at this time…
I could imagine that other new users could make some use of it, once it is checked for errors and other weaknesses sufficiently.
In that case, possibly a new, separate topic with a suitably selected title would do best - I do not know really…
Regards
Uli
P.S.: If you like to check where it is used actually, see here.
It is in german language only at this time - the english page(s) are to be created in a second go.
Remove the duplicate loading attribute and add the missing comma and it should validate ok (assuming you correct the mistakes in the missing head and title).
<section>
<h5 id="BiegenUndAbkanten">Freies Biegen oder Abkanten</h5>
<figure class="figure-left">
<figcaption class="figcaption-top">
<details>
<summary class="summary-top">
Animation
<span-1>Start</span-1>
<span-2>Stop</span-2>
</summary>
<img loading="lazy" width="150" height="150" src="
https://sources.ulisblog.info/img/div/Biegeanimation_2D.wikipedia.0150x0150.gif
" alt="" srcset="
https://sources.ulisblog.info/img/div/Biegeanimation_2D.wikipedia.0150x0150.gif 1x,
https://sources.ulisblog.info/img/div/Biegeanimation_2D.wikipedia.0300x0300.gif 2x
">
</details>
<img loading="lazy" width="150" height="150" src="
https://sources.ulisblog.info/img/div/Biegeanimation_2D.wikipedia.cmp.0150x0150.jpg
" alt="" srcset="
https://sources.ulisblog.info/img/div/Biegeanimation_2D.wikipedia.cmp.0150x0150.jpg 1x,
https://sources.ulisblog.info/img/div/Biegeanimation_2D.wikipedia.cmp.0300x0300.jpg 2x
">
</figcaption>
</figure>
<p>
Diese beiden Verfahren sind die gebräuchlichsten.<br>
Die erste Abbildung zeigt das 'Freie Biegen', die zweite das 'Abkanten'.<br>
Zum leichteren Verständnis können beide auch animiert betrachtet werden.
</p>
<figure class="figure-right">
<figcaption class="figcaption-top">
<details>
<summary class="summary-top">
Animation
<span-1>Start</span-1>
<span-2>Stop</span-2>
</summary>
<img loading="lazy" width="150" height="150" src="
https://sources.ulisblog.info/img/div/Swing-folding-ani.wikipedia.0150x0129.gif
" alt="" srcset="
https://sources.ulisblog.info/img/div/Swing-folding-ani.wikipedia.0150x0129.gif 1x,
https://sources.ulisblog.info/img/div/Swing-folding-ani.wikipedia.0300x0258.gif 2x
" >
</details>
<img loading="lazy" width="150" height="150" src="
https://sources.ulisblog.info/img/div/Swing-folding-ani.wikipedia.cmp.0150x0129.jpg
" alt="" srcset="
https://sources.ulisblog.info/img/div/Swing-folding-ani.wikipedia.cmp.0150x0129.jpg 1x,
https://sources.ulisblog.info/img/div/Swing-folding-ani.wikipedia.cmp.0300x0258.jpg 2x
" >
</figcaption>
</figure>
</section>
Also stop making stuff up <span-1>Start</span-1>
Also make sure your alternate images actually exist as a few are missing like this one:
“Also make sure your alternate images actually exist”
Before entering into side-aspects , this exactly is the problem and it’s remaining after deletion of the second loading = lazy statements and adding one first single comma only.
The gif-file certainly ist existing - otherwise it never could show up without comma.
The actual CodePen is looking now like this (the gif doesn’t show):
Yes and that’s a good example of why validating your code can find problems that you may have missed.
What happened is that because you malformed the srcset the browser dropped out of that srcset rule and instead applied the original image from the src attribute. Your users would never get the higher quality images if their systems were capable.
Once you put the comma in place the browser tries to load the url you gave it but the image doesn’t actually exist. This is not an html error as such and so the browser just carries on.
, this exactly is the problem and it’s remaining after deletion of the second loading = lazy statements and adding one first single comma only.