How do you express multiple CSS classes with multiple images?

Question

Following @DavidThomas comment I have asked a separate question related to this one rather than edit this one to avoid confusion. This question follows from that one. Do CSS rules exist for placing content within elements and positioning them?

I want to express CSS classes with images, so that if a div has the classes classA, classB, classC etc the images called classA.jpg, classB.jpg, classC.jpg etc are placed in the div, but they should be placed in the div in such a way that they don't overlap or overwrite each other.

The images will all be smaller than the div, or resizable to a fraction of the size of the div.

In short the question I am asking how do you get a class to place a graphic at a position which is fraction of the width of the div, and resize it to a certain percentage of hte div's size.

For some more background I asked the question on reddit How can I express multiple CSS classes in the same div?, but I think I have expressed it better succintly here.

First: please [edit] your question to show us: your "*[mcve]*" code, to allow us to reproduce your problem (not *all* your code, just *enough* to show the problem). Show us what you *want* to happen. Show us your best attempt(s) at solving the problem. Tell us where it succeeded, explain where/how it failed. Reading this question, and the linked post on Reddit, I have to admit that I'm still unsure as to what you want, and what you're expecting. — David Thomas, Sep 23 '18 at 12:38
@DavidThomas what I want to know is whether there are CSS rules for placing content within elements such as images or text, **not for styling elements**, so that a div with class `placeImage` will result in an image placed within a div, or will result in some fixed text being placed within all divs with that class. My question assumes that such CSS rules exist, but I am not sure — vfclists, Sep 23 '18 at 13:09
Rather than replying to my comment with clarifications please: [edit] your question to clarify. Comments are transitory, and if people have to read the question *and* the comments the number of people willing to help decreases markedly. — David Thomas, Sep 23 '18 at 13:10

score 1 · Answer 1 · answered Sep 23 '18 at 13:26

I'm not very sure I understand your question. Besides I don't have images with those names, so I had to use articles with images inside. The idea is to make your div a flexbox with height:auto. The images are all squares but different sizes.

let myDiv = document.querySelector("div");
let classNameRy = myDiv.className.split(" ");

for(let i = 0; i < classNameRy.length; i++){
  let thisImg = document.querySelector(`article.${classNameRy[i]} img`);
  let daSrc = thisImg.getAttribute("src");
  let newImg = document.createElement("img");
  newImg.setAttribute("src", daSrc);
  newImg.setAttribute("alt", "whatever");
  myDiv.appendChild(newImg)
}

div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  width: 170px;
  height: auto;
  border: 1px solid;
  padding: 4px 0 0;
}

div img {
  margin: 0 2px 4px 0;
  width: 50px;
  height: 50px;
}

article {
  display: none;
}

<div class="a b c d e f"></div>


<article class="a"><img src="https://via.placeholder.com/50x50"></article>
<article class="b"><img src="https://via.placeholder.com/150x150"></article>
<article class="c"><img src="https://via.placeholder.com/250x250"></article>
<article class="d"><img src="https://via.placeholder.com/50x50"></article>
<article class="e"><img src="https://via.placeholder.com/75x75"></article>
<article class="f"><img src="https://via.placeholder.com/50x50"></article>
<article class="g"><img src="https://via.placeholder.com/50x50"></article>
<article class="h"><img src="https://via.placeholder.com/50x50"></article>
<article class="i"><img src="https://via.placeholder.com/50x50"></article>
<article class="j"><img src="https://via.placeholder.com/50x50"></article>
<article class="k"><img src="https://via.placeholder.com/50x50"></article>
<article class="l"><img src="https://via.placeholder.com/50x50"></article>

Thanks, the `article` approach is also interesting. Is it possible to get the images to overlap each other? My idea is to use equal sized images with transparent backgrounds whose opaque areas wiill not overlap each other so if 3 of the classes are active, ther will be 3 different non-overlapping coloured bars in the background. PS. I amended the question to link to another question which asks about the basic requirements for such a system to be possible. — vfclists, Sep 23 '18 at 14:35

How do you express multiple CSS classes with multiple images?

1 Answers1