mostrar imagen dependiente de su tamaño

[BiPlanet]

Hola a todos, tengo en mi servidor muchas imagenes cargadas de diferentes tamaños, y en mi index muestro dichas imagenes a un tamaño que yo le determine, pero logicamente todas las imagenes no tienen el mismo tamaño por lo que se deforman, especificamente lo que necesito es mostrar una parte de la imagen, osea cropearla, a un tamaño por ejemplo de 300 px de ancho por 100 px de alto, para que quede mas claro, si tengo una imagen de 400 px de ancho por 100 px de alto, que el script muestre la imagen a los 300 px de ancho y no todo el ancho para que no se deforme, me explico?
Les pongo de ejemplo esta pagina, lavoz.com.ar
fijense que en su index, en las tres portadas que tienen, muestran una parte de la imagen para que no se deforme, la original se aprecia con su verdadero tamaño cuando abrimos el enlace, como logro eso?

[maycolalvarez]

para ello se debe generar el thumbnail al subir los archivos, depende de como se haga el mismo para resolver la relación de aspecto (simple matemática de regla del 3), o cortar una parte determinada.

[BiPlanet]

pero existe alguna forma con css para mostrarla?, porque subirlas ya las subi a las imagenes, solo necesito mostrarlas en esa forma...

[memoadian]

width, height?

de todos modos tambien se pueden crear thumbnails de imagenes en el servidor

[Rafael]

Quizá usando un div (con la imagen dentro) con las medidas de base 300px y altura 100px y jugar con la propiedad css overflow, ¿no?

[memoadian]

por que hablamos de css en php?

lo mejor para adaptar una imagen a su contenedor es

max-width:100%
height:auto

así la "miniatura" depende de su padre.

[BiPlanet]

Iniciado por memoadian

por que hablamos de css en php?

lo mejor para adaptar una imagen a su contenedor es

max-width:100%
height:auto

así la "miniatura" depende de su padre.

Pense en eso, pero supongamos:
Yo necesito que la imagen se muestre en un cuadro de 300px de ancho por 100px de alto, la imagen a mostrar es de 400px de ancho por 100px de alto.
Esto haría que la imagen se reduzca a un ancho de 300px pero tambien su alto bajara porcentualmente a menos de 100px, entonces el cuadro no quedara lleno, me explico?
En todo caso tendria que quedar con la altura de 100px y cortar o no mostrar los 100 px que le sobran al ancho...
se entiende lo que necesito?

[memoadian]

claro claro lo que tu digas jefe, pero eso no lo puedes hacer solo con css, usa un script en php que haga crop a las imágenes.

[BiPlanet]

Iniciado por memoadian

claro claro lo que tu digas jefe, pero eso no lo puedes hacer solo con css, usa un script en php que haga crop a las imágenes.

muchas gracias por contestar, investigare para ver que puedo hacer y posteare novedades...

[BiPlanet]

Hola de vuelta, encontré la solución a mi problema:


En el html:

<?php
list($width, $height, $type, $attr) = getimagesize("http://mipagina.com/imagenes/".$rowsi["codigoarchivo"]);
if($height<220)
{
?>
<p class="crop"><img src="http://mipagina.com/imagenes/<?php echo $rowsi["codigoarchivo"]; ?>" height="220px"></p>
<?php
}
else
{
?>
<p class="crop"><img src="http://mipagina.com/imagenes/<?php echo $rowsi["codigoarchivo"]; ?>" width="450px"></p>
<?php
}
?>




En la hoja de estilo:

.crop{
float:left;
overflow:hidden; /* IMPORTANTE */
width:445px;
height:220px;
}



Basicamente lo que hace el script es, yo necesito encajar todas las imagenes que cargar los editores de una web en un cuadro 445px de ancho por 220px de alto y para que no se deforme la imagen, acomodo la misma en base a su tamaño y corto lo que sobra.
Gracias.-