Resizing/Cropping Image to adjust into layout

问题

I'm having issue with the re-sizing / scaling the thumbnails in to the desired layout. I am able to generate the thumbnails here's the code to 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 what will ve the file size of image, but it surely be a HD/DSLR image. Now, the above script generates a thumbnail having with = 600px and height = ratio of the image (e.g 600x400)

In my layout, i want that thumbnail to be adjusted some how, that i won't get distorted, or stretched in any ways. The container which holds the thumbnail has the 200 x 200 px width/height.

When the thumbnails renders in the browser its dimension gets 600px × 401px (scaled to 200px × 200px) height is random for 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 could be solution to exactly scaled to 200 x 200px without having width x height specifics ...

回答1:

I think the easiest way to achieve what you want, is to use background images.

You would have to change the html though to something like:

.post-image {
  width:200px;
  height:200px; 

  background-repeat: no-repeat;
  background-position: center center;
  /* the size makes sure it gets scaled correctly to cover the area */
  background-size: cover;
}
.post-image a {
  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 the background image -->
  <a href="http://localhost/example/products/40/">
  <!-- You can leave the image for SEO if required or you can take it out -->
  <img src="http://localhost/example/static/products/thumbs/0446826001431411830.JPG" alt="my photo" /></a>
</div>

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

Note that part of the image will be cut off this way. If you want to show the whole image in the 200x200 block, you would need background-size: contain; but then you would have space around the image (above / below or left / right depending on the orientation of the image):

.post-image {
  width:200px;
  height:200px; 

  background-repeat: no-repeat;
  background-position: center center;
  /* the size makes sure it gets scaled correctly to cover the area */
  background-size: contain;
  /* just to illustrate */
  background-color: yellow;
}
.post-image a {
  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 the background image -->
  <a href="http://localhost/example/products/40/">
  <!-- You can leave the image for SEO if required or you can take it out -->
  <img src="http://localhost/example/static/products/thumbs/0446826001431411830.JPG" alt="my photo" /></a>
</div>

回答2:

There is a pretty neat solution for this! you would need a parent container for your image and then place the image with position: absolute inside this container as following:

<div class="imageParent">
    <img src="http://placehold.it/600x400" alt="" class="image--fitHeight" />
</div>

And the needed css:

.imageParent {
    width: 200px;
    height: 200px;
    position: relative;
    overflow: hidden;
}

.image--fitHeight {
    position: absolute;
    top: -500%;
    left: -500%;
    right: -500%;
    bottom: -500%;
    margin: auto;
    min-width: 100%;
    height: auto;
}

It stretches the image to a min-width of 100% and since the container has overflow: hidden it will cover the image centered with margin: auto inside your parent container.

it will not be altered / stretched.

if you have an image which has a ratio like 16/9 (so the width is larger than the height) use the method above. vice versa use instead of min-width: 100%; height: auto you simply switch those two: width: auto; min-height: 100%

This method is the same as background: cover but with real images

JSFIDDLE

回答3:

I don't think you can have a scaled image that isn't distorted if you don't respect its ratio. You can either crop the image or zoom it out, but you'll end up with side bands. I would try to find whether the image is in portrait or landscape, and then apply the css accordingly, so that the image fits into your 200x200 frame (this is an example of css with the bands) :

.post-image-portrait img { width:auto; height:200px; }
.post-image-landscape img {width:200px; height:auto;}

(I haven't tested the css, you may have to correct it).

来源：https://stackoverflow.com/questions/30184906/resizing-cropping-image-to-adjust-into-layout