I am trying to restrict images to a certain height and width as a maximum. So naturally I am using max-height and max-width so the images can stay in their aspect ratios when they hit their max. Works in html, here is my code snippets
'<table class="seperate" id="images-table">'.
'<tbody>'.
'<tr>'.
'<td> </td>'.
'<td class="uscs-logo" ><img src="http://localhost/dompdfTest/dompdf/uscompliancesystems_logo.png" /></td>'.
'<td class="signature-logo" ><img src="http://localhost/dompdfTest/dompdf/USCSDefaultSignature.jpg" /></td>'.
'<td> </td>'.
'</tr>'.
'</tbody>'.
'</table>'.
And the css:
table#images-table .uscs-logo {
height: 100px;
text-align: left;
}
table#images-table .uscs-logo img{
max-height:200px;
max-width: 200px;
}
table#images-table .signature {
height: 125px;
text-align: right;
width: 300px;
height: auto;
max-height:200px;
max-width: 200px;
}
But what I get in the pdf is a two page pdf with no images on the page because they are coming in at full size. If I render in html to the page, it comes out fine.
So my question is, is max-width and max-height really supported with dompdf on img tag?
It's not that difficult to resize images on the fly with the GD PHP Extension. As far as time cost, the Browser has to scale if you don't.
$filename ='/home/user/public_html/images/image.jpg';
$image = #imagecreatefromjpeg();
$originalWidth = imagesx($image);
$originalHeight = imagesy($image);
$scale = min($desiredWidth/$originalWidth, $desiredHeight/$originalHeight);
$newWidth = ceil($scale*$originalWidth);
$newHeight = ceil($scale*$originalHeight);
$newPic = imagecreatetruecolor($newWidth, $newHeight);
imagecopyresampled($newPic, $image,0, 0, 0, 0,$newWidth, $newHeight, $originalWidth, $originalHeight);
if (imagejpeg($newPic,$tmpfile)){rename($tmpfile,$filename);}
And restore memory cleanup.
imagedestroy($image);
imagedestroy($newPic);
Related
I have a picture gallery were I'm dynamically adding the pictures with PHP. Some of the images are horizontal and some are vertical. How do I set the width/height of the images and keep the aspect ratio without knowing if the image is horizontal or vertical? Right now the images are appearing square. Ideally I would like the client to change the images without having to adjust the code.
<?php
$filelist = glob("*.JPG");
foreach ($filelist as $file) {
echo '<div class="gallerycell">';
echo '<img src="'.$file.'" width="300" height="300">';
echo '<p>'.substr($file,strpos($file,'/') + 0,-4).'</p>';
echo '</div>';
}
?>
.gallerycell {
display: inline-block;
width: 300px;
height: 300px;
text-align: center;
margin: 30px;
}
To make images fully responsive, without changing their aspect ratio, add these rules to the img element:
img {
display: block; /* removes bottom margin/whitespace */
width: 100%; /* also scales with 100vw */
max-height: 100vh; /* doesn't scale with 100% */
}
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">
Post title
</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 ...
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>
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
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).
I need to style the size of a div directly in the html but I have a problem. The div container size only works if I style the height inside a CSS class, otherwise the container won't have any height (even styling it in the div tag instead, what I'm trying to do).
The width and height are taken from the image, and I don't know any other way to do this;
list($width, $height) = getimagesize('dir/to/img.jpg');
echo $width . $height; //WORKING
// resizing the img...
// the resizing script have max width and height
$img_width = 'width="' . $width . '"';
$img_height = 'height="' . $height . '"';
<div class="img_container" ' . $img_width . ' ' . $img_height . '>
<img src="'. $img_dir . '" class="img"/>
</div>
// the html output is ok but maybe it's not overwriting the css
This is the css class I'm using for the container:
.img_container {
overflow: hidden;
position: relative;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
display: block;
width: auto;
min-height: 50px;
max-height: auto;
}
.img {
height: auto;
display: block;
}
If I remove the height from .img_container, the div won't have any height (and the image is not shown, but the div has the width and height).
So what I want is the div to have the same width and height as the image does.
Inline styles should overwrite (have higher priority than) external CSS, but you haven't set the width and height properly. You should use the style attribute like this;
<div class="img_container" style="width: <?php echo $width; ?>px; height: <?php echo $height; ?>px;">
You also needed to re-enter PHP parsing to use PHP variables (with the <?php ?> tags as above).
Additionally, you have an error in your CSS as you haven't put a semicolon (;) at the end of your img rules.
I found height:auto worked for me in getting the contents within the div.
How to maintain aspect ratio of image thumbnail so they don't look squashed?
protected function DisplayPhoto($Sender) {
$body = $Sender->EventArguments['Discussion']->Body;
preg_match('#\<img(.+?)src=(.+?)\>#s', $body, $matches);
if(isset($matches[2])){
$image = "src=" . $matches[2];
echo '<img class="ProfilePhotoSmall"' . $image . '>';
}else{
//do what you want
}
}
Here is the CSS.
ul.Discussions li img {
height: 60px;
width: 110px;
padding: 0 6px 0 4px;
float: right;
position: relative;
}
.Discussion.ItemContent {
padding-right: 0px;
padding-bottom: 10px;
display: inline;
}
Instead of specifying both a width and height rule in CSS, simply specify one of them (which one will depend upon the way you want the scaling). The omission of one will have the browser maintain the aspect ratio:
ul.Discussions li img {
width: 110px;
padding: 0 6px 0 4px;
float: right;
position: relative;
}
The above code will resize the image to a width of 110px, and the height will be automatically calculated by the browser.
I don't see you changing image size, but the logic will be something like this:
Let's say you have an image of 300px width and 150px height.
Find the ratio, which is 2 here. And when you give a new width to the image, example 250px.
Divide 250px/2 to find the corresponding height. New width is 250px and height is 125px.
It is just a basic logic to give you a hint
Note that you can't resize of images by CSS, it will just resize it for the user. It will load a bigger image than it needs
I want to center an image in an area, without resizing... I am using HTML.
Example:
I have an image <img src='img1.png' width='64' height='64'> - the image is actually 64x64. It displays perfectly.
Now, I have another image <img src='img2.png' width='64' height='64'> however, the image is not as big as it should be, its 32x32 - what happens here is it resizes the image to 64x64 and makes it look like $%^&.
How do I make images smaller then the desired width and height centered in the 'img' area without any resizing what so ever?
What you will need is something like this:
<div class="box">
<img src="whatever size image you'd like" />
</div>
And for the styling (in an external stylesheet, natch) you'd apply:
/* Image centering */
div.box {
border: 1px black solid;
height: 64px;
width: 64px;
background: #444;
display: table-cell;
vertical-align: middle;
}
.box img {
display:block;
margin: 0px auto;
}
This works for images with dimensions <= 64x64px, and is easily modifiable to work with larger pics. The key elements here are
set dimensions on the div
display as a table-cell (allows vertical align)
vertical align (aligns on the Y-axis w/out weird hacks)
display:block on the img element
margin: auto centers the image laterally
Solution without IE-unfriendly display:table-cell:
<!DOCTYPE html>
<style>
div {
line-height:64px; /* that's the secret sauce */
text-align:center;
width:64px; height:64px;
}
img {vertical-align:middle}
</style>
<div><img …></div>
You could try putting the image inside a DIV that is 64x64 and not specifying the image dimensions. Then you could style the div so its contents are centered and any overflow is hidden.
You can dynamically get an image size using the getimagesize() php function:
<?php
$size = getimagesize('imgX.png');
$height = $size[1];
$width = $size[0];
?>
<div style="text-align: center">
<img src="imgX.png" width="<?php print($width) ?>" height="<?php print($height) ?>" />
</div>
I've had to do something similar with 36x36 images. Users were able to upload any size but the thumbnails were only to show the center 36 square pixels.
Markup:
<li><div><span></span>
<img src="_media/objects/jessica-bowman.png" alt="Jessica Bowman" /></div>
<p>Jessica Bowman</p>
</li>
The span was just there to get rounded corners on the image, it's not necessarily needed.
CSS:
ul.recent-list li div {
position: relative;
float: left;
width: 36px;
height: 36px;
overflow: hidden;
}
ul.recent-list li div span {
position: relative;
z-index: 100;
display: block;
width: 36px;
height: 36px;
background: url("../_media/icons/icon-overlay.png") top left no-repeat;
}
ul.recent-list li div img {
position: relative;
top: -36px;
z-index: 0;
float: left;
}
JavaScript:
$(window).load(function() {
$("ul.recent-list div img").each(function() {
var moveX = ($(this).width() / 2 * -1) + 18;
var moveY = ($(this).height() / 2) * -1 - 18; // 18 is 1/2 the default offset of 36px defined in CSS
$(this).css({'top' : moveY, 'left' : moveX});
});
});
The solution is a simple bit of CSS + HMTL
<img src="transparentpixel.gif"
width="64"
height="64"
style="
background-image:url('path/to/image.jpg');
background-repeat:no-repeat;
background-position:center center;
" />
the transparentpixel.gif is a simple 1x1px transparent gif image
An img tag with width and height attributes is saying "stretch or shrink the image to this size regardless of its actual size". use something like:
<div style="text-align:center;">
<img src="x.jpg">
</div>
and no i don't know why text-align would work, but it appears to in my experience.
Use CSS to render the image using background:
<div style="background: url(img1.png) no-repeat center center; height: 64px; width: 64px;"></div>
This will show the image in the center, without scaling it.