Foro

Home Forums Programación Css3 ajustar imagen a div

This topic contains 2 replies, has 2 voices, and was last updated by rafaxplayer rafaxplayer 5 años, 4 meses .

Viendo 3 respuestas - de la 1 a 3 (de 3 en total)
  • ajustar imagen a div

    Intervenciones
  • rafaxplayer
    rafaxplayer 
    Participant

    saludos compañeros , estoy realizando unas fichas las cuales muestran una imagen que quiero adaptar con mediaquerys css3 , el caso es que el contenedor si se redimensiona pero la imagen de fondo no , muestro una captura de la herramienta de googlepara que lo veais mas claro:

    Como veis queda top left a pesar de que uso background. 100% 100%, pero como veis este se desabilita segun el devtool
    mi css es este completo:

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.
    19.

    .img{
      margin:10px auto;
      width:180px;
      height:180px;
      background-size: 100% 100%;
      background-repeat:no-repeat;
      background:url(../img/gorro.png);
      }
    @media all and (min-width: 500px) and (max-width: 1000px)
    {  
    .img{
      margin:20px auto;
      width:280px;
      height:280px;
      background-size: 100% 100%;
      background-repeat:no-repeat;
      background:url(../img/gorro.png);
      }
    }

    No se alguna sugerencia para arreglar esto’ solo quiero que la imagen se adapte al contenedor siempre.


    jedelwey
    jedelwey 
    Participant

    prueba con esto:

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.
    19.
    20.
    21.
    22.
    23.
    24.
    25.

    .img{
      margin:10px auto;
      width:180px;
      height:180px;
      background-size: 100% 100%;
      background-repeat:no-repeat;
      background:url(../img/gorro.png);
      }
    .img img{
      width: 100%;
    }
    @media all and (min-width: 500px) and (max-width: 1000px)
    {  
    .img{
      margin:20px auto;
      width:280px;
      height:280px;
      background-size: 100% 100%;
      background-repeat:no-repeat;
      background:url(../img/gorro.png);
      }
    }
    .img img{
       width:100%;
    }

    Explicación: Básicamente estás redimencionando el div, pero no la imagen dentro del div, ahora con .img img estas seleccionando la imagen hija de la clase img y le pones un ancho del 100% (del padre) por lo que debería funcionarte. También puedes ponerle el height al 100% pero si la imagen no es cuadrada puede deformarse.


    Web: http://www.jedelwey.com Email de contacto: info[@] jedelwey[.]com Twitter: @jedelwey


    rafaxplayer
    rafaxplayer 
    Participant

    ok thanks


Viendo 3 respuestas - de la 1 a 3 (de 3 en total)

You must be logged in to reply to this topic.

RT @addyosmani: Learn how to virtualize large lists & tables with react-window: https://t.co/ggzMgmX6zP ~ a small library for efficiently r…04:25 PM Jun 26th