[SOLUCIONADO] Redimensionar automáticamente las imágenes

[damicomix]

Hola como andan?
tengo un problema tengo un html con CSS que lo que necesito es la imagen que le agrego si es mayor a 720x576px la reseizee y si es menor a esa resolucion no haga nada.
si pude hacer que las achique si supera el tamaño pero no puedo hacer que si es menor a la resolucion que comente que deje la imagen con el tamaño original.

como tendria que hacer?

<style type="text/css">
<!--
#myDiv
{
height:720px;
width:576px;
}
#myDiv img
{
max-width:100%;
max-height:100%;
display:block;
position: relative;
left: 10%;
top: 2%;
margin-left: auto;
margin-top: auto;
}
.TITULO {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 36px;
color: #000;
font-style: normal;
}
-->
</style>
<div><img src="encabezado2016.jpg" width="780" height="199" />
<table width="780" border="0" cellspacing="0" cellpadding="0" style="margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td>
<div align="center" style="text-align: center;">
<p><br /><br />
<strong><span style="letter-spacing: -3px; font-size: 36px; font-family: 'arial black', 'avant garde';">[TITULO]</span></strong></p>
<div id="myDiv"><img src="http://mc-cars.com.ar/IMAGENES/MC-BK362303G.jpg" align="absmiddle" class="myDiv img"/>
</div>
</div>
<div align="center" style="text-align: center;"><span style="font-size: x-large; font-family: 'arial black', 'avant garde';"><strong><br />[SKU]<br /></strong><strong>[GARANTIA]<br/></strong><strong>NUMEROS DE PIEZA:</strong>&nbsp;<strong>[OEM]<br />
<br /></strong></span><img src="pie2016-conMONT.jpg" alt="" width="780" height="1500" style="font-family: 'Arial Black', Gadget, sans-serif; font-size: 24px;" /></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>

[rodrypaladin]

Con un simple max-width: 720px, no te lo soluciona ?.

Lo estoy probando en un documento con una imagen y en principio me funciona, si es más pequeño no hace nada, pero si es más grande la deja a 720px de ancho.

Tal vez otros estilos al mismo item te lo esté cambiando

[Rafael]

Completo un poco.

Necesitas dos partes. 1 contenedor, que se estará redimensionando. Pongamos un simple div.

Código HTML:

<div class="Prueba">
<img>
</div>
 

Este div puede ser cualquier cosa, incluso el mismo body, pero no importa por lo pronto.

Luego un width y el max-width.

Código CSS:

.Prueba img {
width: 100%;
max-width: 720px;}
 

Puedes usar el max-width en el contenedor por ejemplo. Es cosa de que jueges.

[damicomix]

ok, pero con eso el tamaño de 560px de ancho por ejemplo queda de la misma medida no hace nada? no la distorsiona?

[petit89]

el primer width al 100% te dice que puede ocupar el maximo establecido de 720px, si la imagen tienen 560px ese es su 100%... como no llega al maximo, no hara nada, solo si lo sobrepasa

[damicomix]

Perfecto me funciono, gracias a todos por la buena onda y ayuda!

[Rafael]

Oh, usé lla altura en lugar del ancho.

Simplemente define uno de los dos valores. Normalmente yo no le pongo atención al alto, sólo defino el ancho. El otro cambiará solito.