php - Resizing/Cropping Image to adjust into layout -

i'm having issue re-sizing / scaling thumbnails in desired layout. able generate thumbnails here's code crop/resize.

$filename = $key.$_files["files"]["name"][$key];     $filetmp = $_files["files"]["tmp_name"][$key];     $filetype = $_files["files"]["type"][$key];     $filesize = $_files["files"]["size"][$key];     $fileinfo = getimagesize($tmp_name);     $filewidth = $fileinfo[0];     $fileheight = $fileinfo[1];     // gets file extension     $fileextension = pathinfo($filename, pathinfo_extension);     $microtime = preg_replace('/[^a-za-z0-9]/', "", microtime());     $filepath = "../static/products/".$microtime.".".$fileextension;     $filepath_thumb = "../static/products/thumbs/".$microtime.".".$fileextension;     $filepath2 = "/static/products/".$microtime.".".$fileextension;     move_uploaded_file($filetmp,$filepath);    if ($filetype == "image/jpeg") {     $imagecreate = "imagecreatefromjpeg";     $imageformat = "imagejpeg"; }  if ($filetype == "image/png") {     $imagecreate = "imagecreatefrompng";     $imageformat = "imagepng"; }  if ($filetype == "image/gif") {     $imagecreate = "imagecreatefromgif";     $imageformat = "imagegif"; }  $ratio = $filewidth * 1.0 / $fileheight; // width/height if( $ratio > 1) {     $new_width = 600;     $new_height = 600/$ratio; } else {     $new_width = 600*$ratio;     $new_height = 600; }      $image_p = imagecreatetruecolor($new_width, $new_height);      $image = $imagecreate($filepath); //photo folder       imagecopyresampled($image_p, $image, 0, 0, 0, 0, $new_width, $new_height, $filewidth, $fileheight);      $imageformat($image_p, $filepath_thumb);//thumb folder  

the problem:

i don't know ve file size of image, surely hd/dslr image. now, above script generates thumbnail having = 600px , height = ratio of image (e.g 600x400)

in layout, want thumbnail adjusted how, won't distorted, or stretched in ways. container holds thumbnail has 200 x 200 px width/height.

when thumbnails renders in browser dimension gets 600px × 401px (scaled 200px × 200px) height random every image.

the html:

<li class="column"> <div class="post-image"> <a href="http://localhost/example/products/40/"> <img src="http://localhost/example/static/products/thumbs/0446826001431411830.jpg" alt="my photo" /></a> </div>  <div class="product-detail"> <h4 class="post-title"> <a href="/post/40/">post title</a> </h4> </div> </li> 

the css

.post-image{ width:100%; height:200px; } .post-image img { width:auto; height:100%; min-height:200px; } 

what solution scaled 200 x 200px without having width x height specifics ...

i think easiest way achieve want, use background images.

you have change html though like:

.post-image {    width:200px;    height:200px;       background-repeat: no-repeat;    background-position: center center;    /* size makes sure gets scaled correctly cover area */    background-size: cover;  }  .post-image {    display: block:    width: 100%;    height: 100%;   }  .post-image img {    display: none;  }

<div class="post-image" style="background-image: url(http://media1.s-nbcnews.com/j/newscms/2015_20/1018941/150511-ceres-bright-spots-nasa-yh-0106p_fbf0f0c348c8d1881df19c5e07c819d1.nbcnews-fp-800-520.jpg);">    <!--                  ^^^^^ set background image -->    <a href="http://localhost/example/products/40/">    <!-- can leave image seo if required or can take out -->    <img src="http://localhost/example/static/products/thumbs/0446826001431411830.jpg" alt="my photo" /></a>  </div>

and original image: http://www.nbcnews.com/science/space/ceres-spots-shine-new-images-dwarf-planet-n357161

note part of image cut off way. if want show whole image in 200x200 block, need background-size: contain; have space around image (above / below or left / right depending on orientation of image):

.post-image {    width:200px;    height:200px;       background-repeat: no-repeat;    background-position: center center;    /* size makes sure gets scaled correctly cover area */    background-size: contain;    /* illustrate */    background-color: yellow;  }  .post-image {    display: block:    width: 100%;    height: 100%;   }  .post-image img {    display: none;  }

<div class="post-image" style="background-image: url(http://media1.s-nbcnews.com/j/newscms/2015_20/1018941/150511-ceres-bright-spots-nasa-yh-0106p_fbf0f0c348c8d1881df19c5e07c819d1.nbcnews-fp-800-520.jpg);">    <!--                  ^^^^^ set background image -->    <a href="http://localhost/example/products/40/">    <!-- can leave image seo if required or can take out -->    <img src="http://localhost/example/static/products/thumbs/0446826001431411830.jpg" alt="my photo" /></a>  </div>