Escalado inverso de elementos con puro Css

Haz que el tamaño de una imagen o cualquier otro elemento sea inversamente proporcional al del elemento que lo contiene. En puro Css.

Escalado inverso de elementos con puro Css

Por Kseso ✎ 5

Esto es el típico ejemplo de aquello que a priori parece un imposible Css y sin embargo tras verlo sólo cabe darte una palmada en la frente y exclamar: ¡C**ñ!

Me refiero a lograr sólo con puro Css que un elemento vaya ajustando su tamaño de forma inversa a cómo lo haga su padre: mayor al achicar la ventana o menor a medida que la ventana crece.

¿Que no?. Mira lo sencillo que resulta.

Reescalado inverso de elementos puro Css

Para verlo en funcionamiento sólo tienes que redimensionar el div que contiene a la imagen.

imagen para demo

El secreto Css

Todo el secreto se reduce a utilizar la función Css calc() al declarar el tamaño de la imagen en la demo anterior:

img { width: calc(200px - 15%); /*prevenimos los excesos:*/ min-width: 5em; max-width: 20em; }

Breve explicación

Para quienes no pilléis el "truco", recordaros que el valor en % al ser usado en el tamaño de los elementos toma el valor del padre que contiene al elemento como base del cálculo. Así en la demo, lo que hace es restar a los 200px el 15% de la anchura de la caja padre. Cuanto más ancho el padre, mayor el valor que resta a los 200px.

Créditos y reconocimiento de autoría

La primera vez que vi esta técnica fue en este pen de Dave Rupert. El tuvo la idea y yo sólo la comparto contigo.

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 5

  1. Me encanta la idea.
    Solo comentarte que tienes una errata en el título. XD

    ResponderEliminar
    Respuestas
    1. ¿En el título?
      Chirivitas de tanto mirar el título y no hallar nada.

      Después ya sí.
      Gracías por el aviso

      Eliminar
  2. Tu blog esta excelente, pero quiero preguntarte una algo, ¿Cómo puedo hacer para que al copiar y pegar un ENLACE de un post de blogger en facebook me aparezca automáticamente la imagen del post y la descripción del post? , lo probé con una de tus entradas de tu blog y funciona perfectamente, es genial,,, pero cuando lo intento con mi blog con cualquier enlace solo aparece la imagen de la portada, el titulo del blog y la descripcion del blog y no de la entrada, como puedo hacer que funcione como tu blog,, por fa una ayuda,, gracias.

    ResponderEliminar
  3. Hola Marcelo
    Eso es tarea de lo que se conoce como metas. Las tienes para el facebook y twitter.
    Van en el head.
    Estan son las metas que yo utilizo, te las copio tal cual las tengo, incluidos los comentarios:

    <b:include data='blog' name='all-head-content'/>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <title><data:blog.title/></title>
    </b:if>
    <b:if cond='data:blog.pageType == "item"'>
    <title><data:blog.pageName/> | <data:blog.title/></title>
    </b:if>
    <b:if cond='data:blog.pageType == "archive"'>
    <title><data:blog.pageName/></title>
    </b:if>
    <b:if cond='data:blog.pageType == "static_page"'>
    <title><data:blog.pageName/></title>
    </b:if>
    <b:if cond='data:blog.pageType == "index"'>
    <b:if cond='data:blog.searchLabel'>
    <title><data:blog.pageName/></title>
    </b:if>
    </b:if>
    <b:if cond='data:blog.pageType == "error_page"'>
    <title>Oh! Oh!</title>
    </b:if>
    <meta content='blogger' name='generator'/>
    <b:if cond='data:blog.blogspotFaviconUrl'>
    <link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
    </b:if>
    <link expr:href='data:blog.canonicalUrl' rel='canonical'/>
    <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' name='description'/>
    </b:if>
    <b:if cond='data:blog.postImageThumbnailUrl'>
    <link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
    </b:if>
    <b:if cond='data:blog.meTag'>
    <data:blog.meTag/>
    </b:if>
    <b:if cond='data:blog.feedLinks'>
    <data:blog.feedLinks/>
    </b:if>
    <!-- windows 8 -->
    <meta content='#C618BA' name='msapplication-TileColor'/>
    <meta content='https://lh6.googleusercontent.com/-WDzV6KZXdsU/UX0lZXLBx7I/AAAAAAAAGk8/3uBv1pdEGRk/s1600/k.png' name='msapplication-TileImage'/>
    <!-- TWITTER CARDS -->
    <meta content='summary' name='twitter:card'/>
    <meta content='@Kseso' name='twitter:site'/>
    <meta expr:content='data:blog.url' name='twitter:url'/>
    <meta expr:content='data:blog.pageName' name='twitter:title'/>
    <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
    <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
    <!-- Metas para facebook (name=description la incluyo all-head-content) -->
    <!-- <meta property='og:title'> la incluyo donde el título, por conveniencia -->
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <meta content='blog' property='og:type'/>
    <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
    <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
    </b:if>


    Sustituye mis datos por los tuyos.
    Y como complemento, no te limites a un c&p. Ve al blog de Oloman y al de Emilio Cobos que ha escrito sobre el tema.

    Un saludo

    ResponderEliminar
    Respuestas
    1. Gracias amigo por la ayuda, y la verdad decirte una vez más que tu blog es espectacular, espero tener los conociemintos para tener uno así algún día...

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap