Escalado inverso de elementos con puro Css 10.3.14
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
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.
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.
Kseso
the obCSServer ᛯ 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 Kseso
Me encanta la idea.
ResponderEliminarSolo comentarte que tienes una errata en el título. XD
¿En el título?
EliminarChirivitas de tanto mirar el título y no hallar nada.
Después ya sí.
Gracías por el aviso
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.
ResponderEliminarHola Marcelo
ResponderEliminarEso 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
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