I deduce with the help of html-code in user li tags user login. The photos directory stores pictures of users. How to use CSS to display a user's photo?

  • 2
    Something you wrote, understandable only to you. Clarify the question, describe in more detail, attach a sample of the code you are using - likerRr
  • Between li tags I display user login: <li> user1 </ li> Can I display a picture like /photos/user1.jpg? - sitev_ru
  • You can, why not? <li> <img src = "/ photos / user1.jpg"> user1 </ li> - likerRr
  • and if not to use img tag? HTML <li> user1 </ li> let's leave ... what should be CSS? - sitev_ru
  • one
    Instead of li tags can not. Why don't you want to add img? - likerRr

1 answer 1

For some reason I can’t write in comments anymore, so I’ll summarize what was found out with the author of the topic. If you need to display a picture (I understand that we are talking about an avatar) of a user, then semantically this will be done by adding an <img> tag. If you have the task "to draw everything with the help of CSS", then try to convince the person who put it, that such a line of thought is wrong at the root. If you could not convince, and from which it follows that the customer likes non-standard solutions, you can add a little javascript. The algorithm is as follows:

  1. To the li element, add an attribute with the name of the image, for example <li data-pic = "user1"> user1 </ li>
  2. After building the DOM tree, go over the javascript by the elements of the list and update the background property with the appropriate path to the picture.
  3. Set the padding-left for li element equal to the width of the image + a small indent for beauty. If you are sure that the width is constant, you can score a static number in CSS)

It should be something like that . But if javascript cannot be used, then, alas, your task is unsolvable.