我遇到的问题与调整大小/缩放缩略图中所需的布局。 我能够在这里生成缩略图的裁剪/调整大小的代码。
$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高度细节...
我认为实现你想要的最简单的方法,就是使用背景图片。
你将不得不更改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>
有这个一个非常巧妙的解决办法! 你需要一个父容器为你的形象,然后将与图像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
我不认为你可以,如果你不尊重其比率不被扭曲缩放图像。 您可以裁剪图像或缩小它,但你会与边带告终。 我会尝试找出图像是纵向还是横向,然后相应地应用CSS,使图像适合你的200×200帧(这是与乐队的CSS的例子):
.post-image-portrait img { width:auto; height:200px; }
.post-image-landscape img {width:200px; height:auto;}
(我没有测试过的CSS,你可能不得不纠正它)。