调整大小/裁剪图像以适应布局 [英] 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 

问题:

我不知道图像的文件大小如何，但是它肯定是HD/DSLR图像.现在，上面的脚本会生成一个缩略图，其中缩略图= 600px，高度=图片的比例(例如600x400)

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)

在我的布局中，我希望以某种方式调整该缩略图，以免变形或以任何方式拉伸.存放缩略图的容器的宽度/高度为200 x 200像素.

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.

当缩略图在浏览器中呈现时，其尺寸将变为 每个图像的 600px×401px(缩放为200px×200px)高度是随机的.

When the thumbnails renders in the browser its dimension gets 600px × 401px (scaled to 200px × 200px) height is random for every image.

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>

CSS

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

将宽度精确调整为 200 x 200像素而不用指定宽度x高度的解决方案...

What could be solution to exactly scaled to 200 x 200px without having width x height specifics ...

推荐答案

我认为实现所需内容的最简单方法是使用背景图片.

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

您将不得不将html更改为类似的内容:

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>

原始图片: http ://www.nbcnews.com/science/space/ceres-spots-shine-new-images-dwarf-planet-n357161

请注意，图像的一部分将以这种方式被剪切掉.如果要在200x200的块中显示整个图像，则需要background-size: contain;，但图像周围会有空间(取决于图像的方向在上方/下方还是左侧/右侧):

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>

这篇关于调整大小/裁剪图像以适应布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！