Как вы выражаете несколько классов CSS с несколькими изображениями? - PullRequest
Новая
       23

Как вы выражаете несколько классов CSS с несколькими изображениями?

0 голосов
/ 23 сентября 2018

После комментария @DavidThomas я задал отдельный вопрос, связанный с этим, а не редактировал этот, чтобы избежать путаницы.Этот вопрос следует из этого. Существуют ли правила CSS для размещения содержимого внутри элементов и их позиционирования?

Я хочу выразить классы CSS с помощью изображений, чтобы, если div имеет классы classA, classB, classC и т. Д.изображения с именами classA.jpg, classB.jpg, classC.jpg и т. д. помещаются в div, но их следует размещать в div таким образом, чтобы они не перекрывали и не перезаписывали друг друга.

Все изображения будут меньше, чем div, или их размер будет изменяться до доли размера div.

Короче, вопрос, который я задаю, как получить класс для размещения графики в позициикоторый является частью ширины div, и измените его размер до определенного процента от размера hte div.

Для получения дополнительной информации я задал вопрос о reddit Как я могу выразить несколько классов CSS втот же div? , но я думаю, что я лучше выразил это здесь кратко.

1 Ответ

0 голосов
/ 23 сентября 2018

Я не совсем уверен, что понимаю ваш вопрос.Кроме того, у меня нет изображений с этими именами, поэтому мне пришлось использовать статьи с изображениями внутри.Идея состоит в том, чтобы сделать ваш div flexbox с 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>
...