SoloCodigo

CLR: .Net / Mono / Boo / Otros CLR => ASP .NET => Mensaje iniciado por: Moy en Martes 17 de Mayo de 2005, 10:23

Título: Ajustar Imagenes A Un Recuadro
Publicado por: Moy en Martes 17 de Mayo de 2005, 10:23
Bien, imaginaos que teneis un recuadro donde vais a mostrar una serie de imagenes pero que no tienen todas las mismas dimensiones, pudiendo haber algunas con formanto de banner (barra horizontal) y otras en formato de poster (barra vertical).

La intención es mostrar todas las imagenes dentro de un cuadro de 640x480 sin que ninguna se salga de esos márgenes.

La forma más sencilla de fijar el tamaño del recuadro es con un Div (yo hace una semana no sabía ni que existía, asi que en un arranque de empatía lo voy a poner)
Código: Text
  1.  
  2. <DIV id="Recuadro" style="WIDTH: 640px; HEIGHT: 480px" align="center">
  3. <asp:image id="Imagen" runat="server"></asp:image>
  4. </DIV>
  5.  
  6.  
Dentro del Div colocamos la imagen. Como contamos con un buen número de imagenes la imageUrl de la misma es mejor no dejarla establecida, sino cambiarla mediante código (a no ser que querais poner una imagen de portada).
Con el Align del Div conseguimos que la imagen se quede centrada horizontalmente en el recuadro, pero ojo (y esta es la duda que me atormenta) no te centra la imagen verticalmente; por lo que si la imagen no ocupa los 480 pixeles, aparecerá antiestéticamente pegada a la parte superior, dejando un espacio vacío debajo suyo.
Pero eso habrá que solucionarlo después.

Primero hay que detectar si la imagen es vertical, horizontal o si es más pequeña que el recuadro.
En realidad, como el Div ya me soluciona la papeleta centrándome las imagenes verticales, lo unico que hace falta comprobar, de momento, es si la imagen se sale del recuadro establecido y si el ancho es mayor que el alto (lo cual significaría que estamos ante una imagen horizontal).
Para controlar el tamaño de la imagen vamos a usar las propiedades Height y Width, pero solo una a la vez. Si especificamos solo una de ellas, la imagen redimensionará la otra para mantener el aspecto original, lo cual nos viene que ni pintado.

Con esta funcion compruebo las dimensiones de una imagen y devuelvo qué parametro hay que dejar establecido.
Código: Text
  1.  
  2.     ' Obtiene el tamaño de la imagen y ajusta la vertical o la horizontal de la imagen
  3.     ' y devuelve una cadena diciendo si es demasiado alta o demasiado ancha.
  4.     ' La funcion toma el nombre de la imagen de la variable global Direccion
  5.     Function AjustaImagen() As String
  6.  
  7.         Dim Dimension As String
  8.  
  9.         '-- El Alto de la imagen
  10.         Dim iH As Integer = 0
  11.  
  12.         '-- El ancho de la imagen
  13.         Dim iW As Integer = 0
  14.  
  15.         Dim ti As System.Drawing.Image = System.Drawing.Image.FromFile(Server.MapPath(Direccion))
  16.  
  17.         '-- Obtiene la altura y el ancho y le añade un margen
  18.         iH = ti.Height
  19.         iW = ti.Width
  20.  
  21.         If iW > iH  Then 'Ajusta ancho
  22.             Dimension = "WIDTH"
  23.        'Ya que estamos aquí, sacamos el tamaño del margen en una variable exterior
  24.             AnchoMargen = (480 - iH) / 2
  25.         Else 'Ajusta alto
  26.             Dimension = "HEIGHT"
  27.         End If
  28.         Return Dimension
  29.     End Function
  30.  
  31.  

Ahora, cuando querramos cargar la imagen solo tenemo sque pasarle su direcion a este programuko.
Código: Text
  1.  
  2. Private Sub CargaImagen(ByVal ImageDir As String)
  3.  
  4.         Imagen.ImageUrl = ImageDir
  5.         Select Case AjustaImagen()
  6.             Case "WIDTH"
  7.                 imagen.Attributes.Add("width", "640px")
  8.                 imagen.Attributes.Remove("height")
  9.             Case "HEIGHT"
  10.                 imagen.Attributes.Add("height", "480px")
  11.                 imagen.Attributes.Remove("Width")
  12.         End Select
  13.     End Sub
  14.  
  15.  

Esto nos la dejará bien ajustada al tamaño del recuadro, ya sea más grande o mas pequeña que él. Ahora solo falta ajustarla verticalmente.

Pues olvidaos del Div. En vez de eso vamos a cambiarlo por una tabla. La etiqueta <TD> tiene un atributo llamado Valign que controla la alineacion vertical.
Código: Text
  1.  
  2. &#60;TABLE height=&#34;480&#34; width=&#34;640&#34;&#62;
  3. &#60;TR&#62;
  4. &#60;TD vAlign=&#34;middle&#34; align=&#34;center&#34;&#62;
  5. &#60;asp:image id=&#34;Imagen&#34; runat=&#34;server&#34;&#62;&#60;/asp:image&#62;&#60;/TD&#62;
  6. &#60;/TR&#62;
  7. &#60;/TABLE&#62;
  8.  
  9.  

Anda que no me ha costado esto. Que quede aquí grabado en pixeles de fuego para que nadie más vuelva a darse de cabezazos por culpa de una imagen mal alineada.
Hasta la proxima comedera de coco.  :D