调整大小/裁剪图像以调整到布局(Resizing/Cropping Image to adjust

2019-10-23 02:31发布

我遇到的问题与调整大小/缩放缩略图中所需的布局。 我能够在这里生成缩略图的裁剪/调整大小的代码。

$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×200像素的宽度/高度。

当缩略图呈现在浏览器中其尺寸变得600px的×401px(缩放至200像素×200像素)的高度是随机的每个图像。

该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×200像素 ,而无需宽度x高度细节...

Answer 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" alt="my photo" /></a> </div> 

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

注意图像的一部分会被这样切断。 如果你想显示在200×200块的整体形象,就需要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" alt="my photo" /></a> </div> 



Answer 2:

有这个一个非常巧妙的解决办法! 你需要一个父容器为你的形象,然后将与图像position: absolute此容器,里面如下:

<div class="imageParent">
    <img src="http://placehold.it/600x400" alt="" 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 min-width: 100%; height: auto ,您只需切换这两个: width: auto; min-height: 100% width: auto; min-height: 100%

这种方法是一样的background: cover ,但与真正的图像

的jsfiddle



Answer 3:

我不认为你可以,如果你不尊重其比率不被扭曲缩放图像。 您可以裁剪图像或缩小它,但你会与边带告终。 我会尝试找出图像是纵向还是横向,然后相应地应用CSS,使图像适合你的200×200帧(这是与乐队的CSS的例子):

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

(我没有测试过的CSS,你可能不得不纠正它)。



文章来源: Resizing/Cropping Image to adjust into layout
标签: php css gd