1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Ayuda unas dudas sobre CSS

Tema en 'HTML y CSS' comenzado por Alexrodriguezzz, 20 de Agosto de 2017.

  1. Alexrodriguezzz

    Alexrodriguezzz Miembro

    Se incorporó:
    7 de Julio de 2017
    Mensajes:
    52
    Me gusta recibidos:
    5
    Puntos de trofeos:
    8
    Género:
    Hombre
    hola a todos tengo una duda, tengo un <section> y ese section tiene esto:
    Código (CSS):
        width: 100%;
        background:white;
        float: left;
        box-sizing: border-box;
        margin-bottom:-30px;
    bien pues ahora cuando pongo por ejemplo una imagen, ocupa el 100% upload_2017-8-20_22-22-0.png

    entiendo que como tengo en ese section ese 100% y el img lo tengo metido en ese section me pone 100% pero ¿como lo quito? quiero que me mida la medida de la imagen y no entero.

    y otra duda ¿como puedo determinar un height de una imagen pero cuando lo vaya adaptando a distintos dispositivos no se aplaste?
     

    Archivos adjuntos:

  2. <Dan/>

    <Dan/> Miembro

    Se incorporó:
    25 de Septiembre de 2015
    Mensajes:
    88
    Me gusta recibidos:
    49
    Puntos de trofeos:
    18
    Género:
    Hombre
    Ocupación:
    Estudiante
    ¡Que tal!

    Para que el section se ajuste a la imagen, basta con quitar el "width: 100%", ya que como lo mencionas, tiene un ancho "completo".

    Respondiendo a tu siguiente duda, en mi caso lo que hago (puede haber otras formas), es solo jugar con el widht de la imagen en cuestión, hasta el momento me funciona, aunque repito, puede haber más formas :D

    Saludos!

    PD: Dejo un ejemplo.
     
    A AngelKrak le gusta esto.
  3. Alexrodriguezzz

    Alexrodriguezzz Miembro

    Se incorporó:
    7 de Julio de 2017
    Mensajes:
    52
    Me gusta recibidos:
    5
    Puntos de trofeos:
    8
    Género:
    Hombre
    Pues te agradezco mucho tu ayuda!!
     
  4. Alexrodriguezzz

    Alexrodriguezzz Miembro

    Se incorporó:
    7 de Julio de 2017
    Mensajes:
    52
    Me gusta recibidos:
    5
    Puntos de trofeos:
    8
    Género:
    Hombre
    Amigo me sigue pasando lo mismo, por defecto me ocupa el 100% y debo de utilizar float para quitarlo, ¿alguna otra forma para sustituir el float? sé que existe flexbox pero no creo que sirva en este caso
     
  5. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.428
    Me gusta recibidos:
    652
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    puedes hacer que la imagen se ajuste a toda la pantalla tambien ;)

    https://codepen.io/anon/pen/QMmOjK?editors=1100

    con la propiedad object fit puedes adaptar la imagen al contenedor para que no se vea estirada como dices ;)
    Código (CSS):
    object-fit: cover;
     
  6. Alexrodriguezzz

    Alexrodriguezzz Miembro

    Se incorporó:
    7 de Julio de 2017
    Mensajes:
    52
    Me gusta recibidos:
    5
    Puntos de trofeos:
    8
    Género:
    Hombre

    y esto de la imagen que me ocupa todo?
     
  7. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.428
    Me gusta recibidos:
    652
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    si leiste lo que te dije?
     
  8. Alexrodriguezzz

    Alexrodriguezzz Miembro

    Se incorporó:
    7 de Julio de 2017
    Mensajes:
    52
    Me gusta recibidos:
    5
    Puntos de trofeos:
    8
    Género:
    Hombre
    Poniendo
    object-fit: cover;

    me sigue pasando lo mismo me hace por defecto el 100% del contenedor
     
  9. Alexrodriguezzz

    Alexrodriguezzz Miembro

    Se incorporó:
    7 de Julio de 2017
    Mensajes:
    52
    Me gusta recibidos:
    5
    Puntos de trofeos:
    8
    Género:
    Hombre
    Mira tengo un contenedor, y me hace bien la medida pero hay un margen que yo no he puesto y que me lo ha puesto por defecto y me rellena el hueco que queda para 100%;
     
  10. Alexrodriguezzz

    Alexrodriguezzz Miembro

    Se incorporó:
    7 de Julio de 2017
    Mensajes:
    52
    Me gusta recibidos:
    5
    Puntos de trofeos:
    8
    Género:
    Hombre
    esto es lo que me hace https://codepen.io/AlexRodriguezzzz/pen/OjZVee un margen a la izquierda
     
  11. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.428
    Me gusta recibidos:
    652
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    si lo que dices es por que esta centrado el texto, solo quitale el text align ;)

    Código (CSS):
    .articulo-noticia-principal {
        background: transparent;
        /* text-align: center; */
        width: 70%;
        margin-right: 0;
    }
    https://codepen.io/anon/pen/xLjwOj

    nose si leiste bien lo que te dije, pero object fit es solo para que la imagen no se vea mal/alargada es solo para que se ajuste al contenedor ;)
     
  12. Alexrodriguezzz

    Alexrodriguezzz Miembro

    Se incorporó:
    7 de Julio de 2017
    Mensajes:
    52
    Me gusta recibidos:
    5
    Puntos de trofeos:
    8
    Género:
    Hombre

    Me confundí jaja, angle pero me sigue haciendo ese margin-right ¿no hay manera de quitarlo? http://imgur.com/a/NMciJ
     
  13. <Dan/>

    <Dan/> Miembro

    Se incorporó:
    25 de Septiembre de 2015
    Mensajes:
    88
    Me gusta recibidos:
    49
    Puntos de trofeos:
    18
    Género:
    Hombre
    Ocupación:
    Estudiante

    Que tal.

    No entiendo bien a que margen te refieres, aunque si es el que pienso, no es margen, es el ancho que tiene el contenedor... si pudieras ser más específico en esa parte, te agradecería:D
    De cualquier forma, te dejo un ejemplo, no sé si sea a lo que te refieres.

    Cualquier duda, hazla saber.

    Saludos
     
  14. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.428
    Me gusta recibidos:
    652
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    ese no es un margin right, es solo el espacio del width ocupado, para eso lo solucionas con un width 100%
    upload_2017-8-21_23-3-45.png
     
    A gammafp le gusta esto.
  15. Alexrodriguezzz

    Alexrodriguezzz Miembro

    Se incorporó:
    7 de Julio de 2017
    Mensajes:
    52
    Me gusta recibidos:
    5
    Puntos de trofeos:
    8
    Género:
    Hombre
    Dios ya di con la clave jaja gracias!! una ultima duda ¿estoy haciendo bien utilizar <article> para cada post que haga? Lo utilizo como un contenedor
     
  16. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.428
    Me gusta recibidos:
    652
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    A Alexrodriguezzz le gusta esto.

Comparte esta página