你如何用多个图像表达多个 CSS 类？

Question

在@DavidThomas 发表评论之后，我提出了一个与此相关的单独问题，而不是编辑此问题以避免混淆。这个问题来自那个问题。 Do CSS rules exist for placing content within elements and positioning them?

我想用图像来表达 CSS 类，这样如果div 具有类 classA、classB、classC 等，则名为 classA.jpg、classB.jpg、classC.jpg 等的图像被放置在 div , 但它们应该以不会相互重叠或覆盖的方式放置在 div 中。

图像将全部小于 div，或调整为 div 大小的一小部分。

简而言之，我要问的问题是如何让一个类将图形放置在 div 宽度的一小部分位置，并将其调整为 hte div 大小的一定百分比。

关于更多背景，我在reddit How can I express multiple CSS classes in the same div?上问了这个问题，但我认为我在这里表达得更简洁。

Answer 1

我不太确定我是否理解您的问题。另外我没有那些名字的图片，所以我不得不使用里面有图片的文章。 这个想法是让你的 div 成为一个带有height:auto 的弹性框。图片都是正方形，但大小不同。

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>