Get it on Google Play
Tu partner Freelance para tus proyectos IT

Script Javascript para mantener la relación de los objetos

12-08-2020
HTML relación height por width

HTML relación height por width

En HTML, sobretodo cuando queremos hacerlo todo responsive, un quebradero de cabeza es cuando queremos que la relación entre ancho y alto de un elemento sea X. Por ejemplo, nos puede interesar que un DIV o una imagen siempre tenga la mitad de altura que de anchura.

Una manera fácil de mantener proporciones es mediante este script que cree hace poco(Bueno, en realidad llevo mucho tiempo con variaciones). Básicamente tu creas cualquier elemento DIVs, imágenes, etc. y lo marcas con la classe ‘auto-rel’ y le indicas en el atributo ‘xrel’ la relación y ya está.

El script es el siguiente:

window.addEventListener('DOMContentLoaded', reloadElementsRels);
window.addEventListener('resize', reloadElementsRels);

function reloadElementsRels() {
	
	document.querySelectorAll('.auto-rel').forEach(function(currentValue, indice, array){
	    currentValue.style.height=(currentValue.offsetWidth*currentValue.getAttribute("xrel"))+"px";
	    });

	}

Y ahora si queremos que un DIV siempre tenga la mitad de alto que de ancho simplemente lo hacemos así:

<div class='auto-rel' xrel='0.5'>
	Este div siempre será la mitad de alto que de ancho.
</div>

Solución simple a problema complejo. Soy consciente que se puede lograr con CSS pero esta solución funciona siempre y es mucho mas simple y no hay que estar metiendo un DIV dentro de otro, etc.

Si te ha servido, por favor comparte
 

Leave a Reply