调整大小/裁剪图像以调整布局

Posted 2023-02-25

【中文标题】调整大小/裁剪图像以调整布局

【英文标题】：Resizing/Cropping Image to adjust into layout

【发布时间】：2015-05-12 07:54:28

【问题描述】：

我在将缩略图重新调整大小/缩放到所需布局时遇到问题。我可以生成缩略图，这里是裁剪/调整大小的代码。

$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）

在我的布局中，我希望以某种方式调整缩略图，这样我就不会被扭曲或以任何方式拉伸。保存缩略图的容器的宽度/高度为 200 x 200 像素。

当缩略图在浏览器中呈现时，它的尺寸得到 600px × 401px（缩放到 200px × 200px）每个图像的高度是随机的。

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"  /></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; 

在没有宽 x 高细节的情况下精确缩放到 200 x 200px 的解决方案是什么...

【参考方案1】：

我认为实现您想要的最简单的方法是使用背景图片。

您必须将 html 更改为以下内容：

.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"  /></a>
</div>

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

请注意，这样会切断部分图像。如果您想在 200x200 块中显示整个图像，则需要background-size: contain;，但是您将在图像周围留出空间（根据图像的方向，上/下或左/右）：

.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"  /></a>
</div>

【讨论】：

感谢您的快速回复。我尝试了你的解决方案，但缩略图的左上角区域是可见的，图像的其余部分被隐藏了:(截图dl.dropboxusercontent.com/u/68407113/img/…

@yaqoob 如果可能的话，把一个实际的例子放到网上（你甚至可以在 SO 上这样做！）。看起来您没有隐藏真实图像或css中有错误。

@yaqoob 我已将解码代码转换为对 sn-p 的回答。请注意，它有效，但您必须删除 css 中的注释，因为我最初使用的是 sass 样式的注释。

有没有可能不裁剪图像？虽然它现在作为 sn-p 对我有用...

@yaqoob 是的，请参阅我回答的最后一段。但是你永远不会得到一个非方形的图像来适应一个显示所有内容的方形框并且不会扭曲它:-)

【参考方案2】：

对此有一个非常巧妙的解决方案！您需要为您的图像创建一个父容器，然后将带有position: absolute 的图像放入此容器中，如下所示：

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

以及所需的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;

它将图像拉伸到 100% 的最小宽度，并且由于容器具有 overflow: hidden，它将覆盖父容器内以 margin: auto 为中心的图像。

它不会被改变/拉伸。

如果您的图片比例为 16/9（因此宽度大于高度），请使用上述方法。反之亦然使用而不是 min-width: 100%; height: auto 你只需切换这两个：width: auto; min-height: 100%

此方法与background: cover相同，但使用的是真实图像

JSFIDDLE

【讨论】：

感谢您的帮助:)

【参考方案3】：

如果您不尊重比例，我认为您不可能拥有不失真的缩放图像。您可以裁剪图像或将其缩小，但最终会出现边带。 我会尝试找出图像是纵向还是横向，然后相应地应用 css，以使图像适合您的 200x200 框架（这是带带的 css 示例）：

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

（我没有测试过css，你可能需要更正它）。