Just sharing what was able to be done.
1 Like
Images in the CSS:
Code: https://jsfiddle.net/4pkx2q96/
Changing background size here to different properties, makes no visual changes in the code.
If I remove this whole thing, it makes no difference either.
Why was it added to begin with?
If it doesn’t seem to be doing anything in the code?
.inner span,
.inner span:before,
.inner span:after,
.inner:before,
.inner:after {
background-size: cover;
}
Another question:
If I wanted to change aspect ratio to padding-top: 56.25%;
Is that possible to do?
.inner span,
.inner span:before,
.inner span:after,
.inner:before,
.inner:after {
aspect-ratio: 1;
margin: auto;
height: 100%;
}
AI said to do this:
In the .inner class, I replaced height: 100%; with height: 0; and added padding-top: 56.25%;. This will maintain the aspect ratio of 16:9 (since 9/16 = 0.5625 or 56.25%). The aspect-ratio: 1; property was removed from the .inner span, .inner span:before, .inner span:after, .inner:before, .inner:after selector. This is because the aspect ratio is now controlled by the padding-top property. Please note that this will work as long as the width of the .inner class is set to a specific value. If the width changes, the height will adjust accordingly to maintain the aspect ratio.
Did the css work that it gave me, no.
Another Question: Is there a way for the responsiveness of the html code to be the same as the css code? In the css code the whole image is viewable.
In the html code the image gets cut off at the top and bottom.
Images in the css: https://jsfiddle.net/432tzukc/
images in the html: https://jsfiddle.net/korqn1zv/1/
yes, this works, I have to be using real images:
.inner span,
.inner span:before,
.inner span:after,
.inner:before,
.inner:after {
background-size: cover;
}
Just this question is left there:
If I wanted to change aspect ratio to padding-top: 56.25%;
Is that possible to do?
.inner span,
.inner span:before,
.inner span:after,
.inner:before,
.inner:after {
aspect-ratio: 1;
margin: auto;
height: 100%;
}
And I have another question:
Am I able to set a max-width of the css image code like how it is done in the html code?
.container2 {
max-width: 360px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.container2 img {
display: block;
margin: auto;
width: 33.33%;
height: auto;
}
Prevents the whole image from getting super huge:
You tell me? It’s your code!
There is no span inside .inner neither are there any background images in that section so the code is doing nothing.
Why remove valid code to add a hack?
1 Like
Was curious how it would be done.
See before and after.
Something to save in my codes I have saved.
1 Like
Would I be able to put the css image code inside a container where I would be able to set a, I guess it would be a max height or width, where it won’t get bigger than what is set?
.container2 {
max-width: 360px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.container2 img {
display: block;
margin: auto;
width: 33.33%;
height: auto;
}
Isn’t that more or less what you have already done there with the max-width on the container2?
You could set a max-width on the image in px if you wanted.
.container2 img {
display: block;
margin: auto;
width: 33.33%;
max-width:150px;/* or whatever */
min-width:50px;/* or whatever */
height: auto;
}
This is the css code and I don’t know how to add container to it.
I should have been clearer.
I meant the code with the images in the css.
https://jsfiddle.net/432tzukc/
.inner {
height: 100%;
width: 200%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: auto;
}
.panel-right .inner {
left: -100%;
}
.inner span,
.inner span:before,
.inner span:after,
.inner:before,
.inner:after {
aspect-ratio: 1;
margin: auto;
height: 100%;
}
.inner:before {
content: "";
background: url(https://i.imgur.com/z5MMJnv.png);
}
.inner:after {
content: "";
background: url(https://i.imgur.com/8Jf8LLc.png);
}
.inner span {
background: url(https://i.imgur.com/5u16syR.png);
position: relative;
}
.inner span:before,
.inner span:after {
content: "";
display: block;
position: absolute;
inset: 0 0 0 0;
}
.inner span:before {
background: url(https://i.imgur.com/ygTtvme.png);
transform: translateX(-99.99%);
}
.inner span:after {
background: url(https://i.imgur.com/QziKNDW.png);
transform: translateX(99.99%);
}
.inner span,
.inner span:before,
.inner span:after,
.inner:before,
.inner:after {
background-size: cover;
}
Is this able to be added to the above code?
.container2 {
max-width: 360px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.container2 img {
display: block;
margin: auto;
width: 33.33%;
height: auto;
}
Try these changes to the following rule:
.inner span,
.inner span:before,
.inner span:after,
.inner:before,
.inner:after {
aspect-ratio: 1;
margin: 0;/* WAS AUTO*/
height: 100%;
max-height:150px;/* added - change to suit */
}
.
The whole image is not showing now. https://jsfiddle.net/c3hntk24/
Did I do something wrong or forget to do something?
Yes 
This is the culprit:
.
Can you find it?
1 Like
Am I able to replace aspect-ratio: 1; with, padding-top: 56.25%;, or is that not possible to do?
@PaulOB has answered that question repeatedly, most recently in this post.
Unless you have a reasonable, special use case for replacing a valid approach with a hack, DON’T DO IT!
2 Likes
code: https://jsfiddle.net/nz93xrwv/1/
Where the images are in the html, the image gets squished, where the aspect ratio doesn’t stay intact.
Is there a fix for that?
Ideally, that should not be a problem, I am not sure.
What do you say?
Is there a way for the whole image to stay visible inside its whole viewport when the images are in the html?
Maybe that is a better way to ask it.
Try something like this:
.container2 {
max-width: 360px;
border: 1px solid #ccc;
box-sizing: border-box;
max-height:100vh;
aspect-ratio: 1;
}
1 Like
code https://jsfiddle.net/pdxfkmt8/2/
After clicking the first exit button the image is fine.
After clicking the 2nd exit button I am seeing this:
How would this be fixed?
It seems, the images from the 1st one are being added to the 2nd one.
I don’t know how that is occurring since two different id’s are being used.
id="image-templateA"
id="image-templateB"
Code:
<template id="image-templateA">
<img src="https://i.imgur.com/z5MMJnv.png" alt="Image 1">
<div>
<img src="https://i.imgur.com/5u16syR.png" alt="Image 2">
<img src="https://i.imgur.com/ygTtvme.png" alt="Image 3">
<img src="https://i.imgur.com/QziKNDW.png" alt="Image 4">
</div>
<img src="https://i.imgur.com/8Jf8LLc.png" alt="Image 5">
</template>
<div class="panel-container">
<div class="slide panel-left">
<div class="inner">
<div class="container2"></div>
</div>
</div>
<div class="slide panel-right">
<div class="inner">
<div class="container2"></div>
</div>
</div>
</div>
<template id="image-templateB">
<img src="https://i.imgur.com/lNH6CGY.png" alt="Image 1">
<div>
<img src="https://i.imgur.com/8bPDWNh.png" alt="Image 2">
<img src="https://i.imgur.com/HgKNKxe.png" alt="Image 3">
<img src="https://i.imgur.com/nCRNnjS.png" alt="Image 4">
</div>
<img src="https://i.imgur.com/1SJgqB8.png" alt="Image 5">
</template>
<div class="curtain-container hide">
<div class="slide curtain-left">
<div class="inner">
<div class="container2"></div>
</div>
</div>
<div class="slide curtain-right">
<div class="inner">
<div class="container2"></div>
</div>
</div>
</div>
js:
function addTemplateToContainersA() {
const template = document.getElementById("image-templateA");
document.querySelectorAll(".container2").forEach(function(container) {
container.appendChild(template.content.cloneNode(true));
});
}
function resetPage() {
removeModal("#myModal");
addTemplateToContainersA();
showExit(".panel-container", ".exit");
}
function addTemplateToContainersB() {
const template = document.getElementById("image-templateB");
document.querySelectorAll(".container2").forEach(function(container) {
container.appendChild(template.content.cloneNode(true));
});
}
function resetPage2() {
handleModal2("myModal");
addTemplateToContainersB();
hideContainer2(".containerA");
showCurtain(".curtain-container");
showContainer(".containerB");
}
I’m not sure why you are using template tags to apply different sets of images as you may have well just put them in the html to start with and do away with all the js. I believe template tags would be useful for adding multiple copies of the same thing but that doesn’t seem to be what you are doing.
Anyway…
The problem in your code is that you search for .container2 and find all instances and add the template to both versions. Then when you click the button again you again add the template to both versions resulting in double images.
You need to narrow the selection down to the place in hand.
e.g. for containerA the container2 is inside .panel-container so you could target it like this.
function addTemplateToContainersA() {
const template = document.getElementById("image-templateA");
document.querySelectorAll(".panel-container .container2").forEach(function(container) {
container.appendChild(template.content.cloneNode(true));
});
}
Then containerB has a parent called outer-container which could be used.:
function addTemplateToContainersB() {
const template = document.getElementById("image-templateB");
document.querySelectorAll(".outer-container .container2").forEach(function(container) {
container.appendChild(template.content.cloneNode(true));
});
}
1 Like
Maybe it was AI that said to use template.
What should it be instead?