Hola, recurro al foro ya que no se me ocurre como puedo hacerlo, la idea es que el conjunto de imágenes queden centradas y también queden centradas al re dimensionar con el pequeño script java, dejo el código a ver si os ocurre algo, gracias!!
<html>
<body>
<h1>Ejercicio Redimensionado JavaScript</h1>
<input id="ancho" type="number">Ancho
<input id="alto" type="number">Alto
<button type="button" onclick="Redim()">Redimensionar</button>
<br>
<IMG id="im1" SRC="1.jpg">
<IMG id="im2" SRC="2.jpg">
<IMG id="im3" SRC="3.jpg">
<IMG id="im4" SRC="4.jpg">
<IMG id="im5" SRC="5.jpg">
<IMG id="im6" SRC="6.jpg">
<IMG id="im7" SRC="7.jpg">
<IMG id="im8" SRC="8.jpg">
<IMG id="im9" SRC="9.jpg">
<script>
function Redim()
{
var imagen1=document.getElementById("im1");
var imagen2=document.getElementById("im2");
var imagen3=document.getElementById("im3");
var imagen4=document.getElementById("im4");
var imagen5=document.getElementById("im5");
var imagen6=document.getElementById("im6");
var imagen7=document.getElementById("im7");
var imagen8=document.getElementById("im8");
var imagen9=document.getElementById("im9");
var ancho=document.getElementById("ancho").value;
var alto=document.getElementById("alto").value;
var AnchoImagenes=ancho/3;
var AltoImagenes1=(300*alto)/742;
var AltoImagenes2=(200*alto)/742;
var AltoImagenes3=(242*alto)/742;
imagen1.style.width=AnchoImagenes+"px";
imagen1.style.height=AltoImagenes1+"px";
imagen2.style.width=AnchoImagenes+"px";
imagen2.style.height=AltoImagenes1+"px";
imagen3.style.width=AnchoImagenes+"px";
imagen3.style.height=AltoImagenes1+"px";
imagen4.style.width=AnchoImagenes+"px";
imagen4.style.height=AltoImagenes2+"px";
imagen5.style.width=AnchoImagenes+"px";
imagen5.style.height=AltoImagenes2+"px";
imagen6.style.width=AnchoImagenes+"px";
imagen6.style.height=AltoImagenes2+"px";
imagen7.style.width=AnchoImagenes+"px";
imagen7.style.height=AltoImagenes3+"px";
imagen8.style.width=AnchoImagenes+"px";
imagen8.style.height=AltoImagenes3+"px";
imagen9.style.width=AnchoImagenes+"px";
imagen9.style.height=AltoImagenes3+"px";
imagen1.style.position="absolute";
imagen1.style.top="100px";
imagen1.style.left="0px";
imagen2.style.position="absolute";
imagen2.style.top="100px";
imagen2.style.left=AnchoImagenes+"px";
imagen3.style.position="absolute";
imagen3.style.top="100px";
imagen3.style.left=AnchoImagenes+AnchoImagenes+"px ";
imagen4.style.position="absolute";
imagen4.style.top=100+AltoImagenes1+"px";
imagen4.style.left="0px";
imagen5.style.position="absolute";
imagen5.style.top=100+AltoImagenes1+"px";
imagen5.style.left=AnchoImagenes+"px";
imagen6.style.position="absolute";
imagen6.style.top=100+AltoImagenes1+"px";
imagen6.style.left=AnchoImagenes+AnchoImagenes+"px ";
imagen7.style.position="absolute";
imagen7.style.top=100+AltoImagenes1+AltoImagenes2+ "px";
imagen7.style.left="0px";
imagen8.style.position="absolute";
imagen8.style.top=100+AltoImagenes1+AltoImagenes2+ "px";
imagen8.style.left=AnchoImagenes+"px";
imagen9.style.position="absolute";
imagen9.style.top=100+AltoImagenes1+AltoImagenes2+ "px";
imagen9.style.left=AnchoImagenes+AnchoImagenes+"px ";
}
</script>
</body>
</html>