Un div tiene un fondo tilable. La altura de este div dependerá de su contenido. Necesito el div para estirar por un múltiplo del tamaño de la imagen de fondo.CSS: ¿le da a un div una altura que es un múltiplo de un número?
Por ejemplo, el fondo es una imagen de 64x64. Entonces, si la altura del div va a aumentar, quiero hacerlo por pasos de 64px.
¿Es esto posible con CSS? No he encontrado pistas usando Google. ¡Gracias por tu tiempo!
Que yo sepa, esto no se puede hacer en CSS, pero probablemente pueda resolverlo con algunos javascript. Si tiene acceso a jQuery:
$(function() {
$div = $('#the_div_id');
var remainder = $div.height() % 64;
var newHeight = $div.height() + (64-remainder);
$div.css('height', newHeight);
});
Se puede resolver con javascript incluso sin jQuery. – Rob
Sí, creo que iré por ese camino, después de que el documento esté listo. gracias =) – Jem
De nada. Por cierto, '$ (function() {...});' es una abreviatura de "haz esto cuando el DOM esté listo", en caso de que seas nuevo en jQuery. Y como dijo @Rob, también se puede hacer en Javascript nativo, yo personalmente prefiero jQuery. – Christoffer
¿Cuál es el contenido del div? Parece que en lugar de establecer el tamaño del div en el valor correcto, debe prestar atención al contenido: this post detalla algunas técnicas bastante simples para implementar el ritmo vertical, que debería funcionar (es decir, utilizando una altura de línea de 64 px)
En realidad se trata de un kitsch ui: El div representa una escalera, y su altura es proporcional a la altura del div desde la parte superior de la pantalla: hace que el mosaico sea necesario para conectarse a los elementos del terminador. – Jem
Una solución (dependiendo de su caso específico) podría ser utilizar la nueva propiedad CSS background-size. He dejado las declaraciones separadas para mayor claridad:
div.yourDiv {
background-image: url('yourImage.jpg');
background-repeat: repeat;
background-size: contain;
}
Entonces, sea cual sea el tamaño de su div, su imagen se teja a la perfección sin ser cortada. Los navegadores antiguos obtendrán la imagen embaldosada, lo que puede o no ser un problema.
muy interesante, ¡estoy probando esto ahora! – Jem
¿Es admitido javascript? – ANeves
No puede hacer esto en css: en general, css no le permite establecer estilos condicionales al contenido de un elemento de tamaño dinámico. – Oliver
En css simple no se puede lograr. Prueba jQuery por eso. – NewUser