0

soy estudiante de diseño grafico y estoy aprendiendo a maquetar, me propuse armar mi Cv con HTML y Css. Lo que quiero lograr es poder linkear a mi portfolio, decidí que la mejor manera era crear una "" y asignarle una imagen a cada uno de mis proyectos pero no logro que las imagenes aparezca, me podrían ayudar? ya estuve varias horas con esto y no logro dar con la solución, que probablemente sea muy sencilla como ya me a pasado pero no logro verla...

.portfolio{
    background-color: aliceblue;
    padding: 50px;
    margin-top: 10px;
    margin-left: 50px;
    margin-right: 50px;    

}

.img-portfolio{
    list-style: none;
    list-style-image: url("/imgs/mapa-interactivo-icon.png");
    width: 150px;
    height: 150px;


}
<div class="portfolio">
        
        <li class="img-portfolio">
            <ul></ul>
            <ul></ul>
            <ul></ul>
            <ul></ul>       
        </li>

    </div>

1

1 respuesta 1

4

La imagen no aparece porque la lista está mal creada. En este caso la etiqueta que define a la lista es <ul></ul> mientras que sus elementos se definen con <li></li>.

.portfolio{
    background-color: aliceblue;
    padding: 50px;
    margin-top: 10px;
    margin-left: 50px;
    margin-right: 50px;    

}

.img-portfolio{
    list-style: none;
    list-style-image: url("https://picsum.photos/200/300");
    width: 150px;
    height: 150px;


}
<div class="portfolio">
  <ul>
    <li class="img-portfolio"></li>    
  </ul>
</div>

IMPORTANTE

list-style-image sirve para definir la imagen que se utiliza como marcador del listado, no el contenido propiamente tal. Si quieres crear una lista de imágenes lo más apropiado seria utilizar la etiqueta <img /> dentro de cada elemento de la lista para agregar tu imagen o agregar al elemento de la lista (li, o un hijo que decidas crear dentro) una imagen de fondo.

Agregando una imagen de fondo mediante css

ul {
  list-style: none;
}

.background-image{
  width: 200px;
  height: 300px;
  background: url('https://picsum.photos/200/300')
}
<ul>
  <li class="background-image"></li>
</ul>

Agregando una imagen mediante html

ul {
  list-style: none;
}
<ul>
  <li> 
    <img src="https://picsum.photos/200/300" width="200"/>
  </li>
</ul>

Fijate que para ambos ejemplo agrego la siguiente regla de css

ul {
  list-style: none;
}

Esto permite quitar el punto negro que representa al marcador de listado, donde tu actualmente estás poniendo la imagen personalizada, del contrario apareceria el marcador como un punto negro y la imagen.

Hacerlo con las opciones que te indique te permitirá mayor versatilidad a la hora de manipular luego la imagen.

1
  • Muchas gracias me soluciono el problema, estuve dándole vueltas bastante tiempo y me imagine que era algo simple pero no lo vi. Me falta bastante practica todavía Commented el 25 ago. 2021 a las 4:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.