I am looking for some sort of function that will resize an image to 100x100, 200x200 etc but keep the aspect ratio of the uploaded image in tact.
My plan would be to use some sort of cropping, so to crop in the centre of the image after it's height or width reaches 100.
So my logic is a bit like this.
if ( $currentHeight > $currentWidth ) {
//resize width to 100 and crop top and bottom off so it is 100 high
}
elseif ( $currentWidth > $currentHeight ) {
//resize height to 100 and crop left and right off so it is 100 wide
}
In my mind the image would then be 100x100 and it wont look odd!
Does anyone know how I could do this in a tidy function??
You can also use pure css to crop images to fit specific dimensions using clip:rect:
<style>
/*Size of div that contains the dox*/
.crop{
float:left;
position:relative;
width:100px;
height:100px;
margin:0 auto;
border: 2px solid #474747;
}
.crop img{
margin:0;
position:absolute;
top:-25px;
left:-25px;
/* (Top,Right,Bottom,Left) */
clip:rect(25px 125px 125px 25px);
}
</style>
<div class="crop">
<img src="http://static.php.net/www.php.net/images/php.gif" width="200" title="" alt="" />
<div>
<br/>
<div class="crop">
<img src="http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=5" title="" alt="" />
<div>
See In Action
If you want to crop central part, then I suppose logic for counting coordinates can be such:
1) Count horisontal coordinats of crop area:
$horizontal_center = $current_width/2;
$left = $horizontal_center - $new_width/2;
$right = $horizontal_center + $new_width/2;
2) Count vertical coordinates of crop area:
$vertical_center = $current_height/2;
$top = $vertical_center - $new_height/2;
$bottom = $vertical_center + $new_height/2;
here is my answer - ive written a imagemagick/php function to do this:
stackoverflow.com/questions/20927238/
Related
Good Day, I want to display all images but it seems hard to me fetch it with different sizes if my table is per row. Please take a look on the image.
You can see that the all images are inside the single row. So I used array to display it and call its column name to separate the width and height of every individual. How can I fetch it in rows form.
For example:
row1 : where image_one is stored
row2 : where image_two is stored
row3 : where image_three is stored
row4 : where image_four is stored
so basically it has primary key on it.
and heres the css for it:
which was took here in stack by SEAN
img {
height: 200px; // set a standard height
padding-bottom: 5px; // add a space between the img rows
}
.image-one-frame, .image-four-frame {
width: 66%; // make one and four 2/3 the width
}
.image-two-frame, .image-three-frame {
width: 33%; // make two and three 1/3 the width
}
.image-one-frame, .image-three-frame {
float: left; // make one and three float left
}
.image-two-frame, .image-four-frame {
float: right; // make two and four float right
}
$viewquery= mysqli_query($connection,"SELECT * from sales");
while($row = mysqli_fetch_assoc($viewquery)) {
echo' <div class="div-frame-five">';
echo' <img src="images/'.$row["image_one"].'" alt="" class="image-
one-frame">';
echo' <img src="images/'.$row["image_two"].'" alt="" class="image-
two-frame">';
echo' <img src="images/'.$row["image_three"].'" alt="" class="image-
three-frame">';
echo' <img src="images/'.$row["image_four"].'" alt="" class="image-
four-frame">';
echo' </div>';
}
THIS IS TABLE IN THE DB
Image Table
I scan trough a folder for images by using php,
i put them in a div with the ID of images.
I want that div to scroll on the x-axis and hide everything that overflows on the y-axis.
So here's my code.
HTML and PHP:
<div id="images">
<?php
//Displaying images
$imgID = 0;
foreach($images as $image) {
echo "<img id='img".$imgID."' onClick='displayImg(".$imgID.");' src='".$image."' height='".$imgHeight."' width='".$imgWidth."' />";
$imgID++;
}
echo "<script>var maxImages = ".$imgID.";</script>";
?>
CSS:
#images {
overflow-y:hidden;
overflow-x:scroll;
height:<?php echo $imgHeight; ?>px;
border:solid 1px #c4c4c4;
align-content:flex-start;
}
#images img {
padding:5px;
cursor:pointer;
float:left;
}
I've experimented a bit, But nothing i've tried seems to work.
Your question is slightly out of context but how about something like:
http://jsfiddle.net/bassmanpaul/u9Xx6/
This goes on the assumption that you have the image widths available in php ($imgWidth) which can allow you to create a large inner container.
Failing that you may need to give us a JSFiddle to demonstrate your issue in greater detail...
I want to display a image in a div section. Here is the css i am using
#imagesection {margin:10px 10px 10px 10px; float:left; border: 5px solid #f0f0f0;}
#container {width:90%; margin:3% 0px 0px 10%;}
#full_page {height:auto; width:auto;}
#name {background-color:#FFF; word-wrap:break-word; word-break:}
</style>
The image is being displayed well but when i added text ($name) It's loosing the style. Please check the image below
<div id="full_page">
<div id="container">
<div id="Gallery">
<div id="imagesection">
<img src = <?php echo $picture;?> />
<div id="name">
<?php echo $name; ?>
</div>
</div>
</div>
</div>
</div>
I want the text to be continued in new line if length of image is exceeded.
I mean the text should be automatically adjusted with correspondence to image inside div, With out leaving blank spaces.
Please suggest me what should be done to achieve this...
Updated Snapshot :
Apply Float on your image tag
For example:
css
{
#image
{
float: left;
}
}
<img id="image" src = <?php echo $picture;?> />
Update:
After watching your updated screenshot. What I sugggest you can do is to get the width of the image and then pass that to your div that will automatically stops the text to overflow the div
Here is the code of getting height and width
<?php
list($width, $height, $type, $attr) = getimagesize("image_name.jpg");
echo "Image width " .$width;
echo "<BR>";
echo "Image height " .$height;
echo "<BR>";
echo "Image type " .$type;
echo "<BR>";
echo "Attribute " .$attr;
?>
Always set your img width, height, border and alt tags. I would also set the width of the image div and the text div explicitly. If you set all three of them to 500px for instance, the text should wrap.
I have an image that has it's width greater than the height and it is still outputting using the second if statement in the jQuery. I do believe it might have something to do with the PHP sector outputting multiple image files. So I changed the id selector to a class selector, but it doesn't want to budge. Does anybody know what I am doing wrong? I have hit rock bottom on this problem.
<?php $userid = $this->session->userdata('userid');
$selectedId = $_REQUEST['id'];
$query1 = $this->db->query("SELECT * FROM userProfilePhotos p, userProfileAlbums a WHERE p.isAlbumCover = 'Yes' AND p.userid = a.userid AND a.userid = '{$selectedId}' AND a.albumId = p.albumId");
foreach($query1->result() as $row1) {?>
<script type="text/javascript">
$(document).ready(function() {
function heightOverWidth() {
return '<div style="width: 102px; height: 136px; border-radius: 3pt; background-color: white; border: 1px solid #C1C1C1; padding: 10pt">'+
'<img id="profileImg" alt="" height="130" src="<?=base_url().$row1->imgURI?>" width="100" />'+
'</div><span class="link-font3"><?=$row1->albumName?></span> <span class="font1"> - <?=$row1->albumDesc?></span>';
}
var img = $(".profileImg");
if (img.width() >= img.height()) {
alert("1");
} if (img.height() >= img.width()) {
$("#albumList").append(heightOverWidth());
}
});
</script>
<?php list($width, $height, $type, $attr) = getimagesize(base_url() . $row1->imgURI); ?>
<div id="albumList" style="padding: 10pt">
<img class="profileImg" style="display: none" alt="" height="<?=$height?>" width="<?=$width?>" src="<?=base_url().$row1->imgURI?>" />
</div>
<?php } ?>
Change the width() to attr('width') and same thing with height. This will read your width/height attributes instead of trying to get the actual width and height. Your solution does not work as an element with display:none doesn't have any visible dimensions.
How do I get images in certain fixed size, example I've attached the image and codes for your review
Please click on this link (image) to understand my question
<img src="<?php echo $picfile; ?>" border="0" width="<?php echo $imgsize[0]; ?>" height="<?php echo $imgsize[1]; ?>" align="left" style="border:1px solid black;margin-right:5px;">
You can get image details with
$details = get_image_size($filename).
$details[3] will contain the width and height in html format ready for you to use.
Could possibly try this
img src='$filename' style='width:250px; height: 250px'
allows you to strech image to specific size
to scale you could use
img src='$filename' style='width:auto; height: 250px'
There are a few ways to do this. As you are looping through your images, you want to keep track of the maximum width.
$newImageArray = array();
$maxWidth = 0;
$maxHeight = 0;
$i = 0;
forEach ( $imageArray as $picfile ) {
$newImageArray[$i]['picFile'] = $picfile;
$imgsize = get_image_size($picfile);
$newImageArray[$i]['width'] = $imgsize[0];
if ( $imgsize[0] > $maxWidth ) {
$maxWidth = $imgsize[0];
}
$newImageArray[$i]['height'] = $imgsize[1];
if ( $imgsize[1] > $maxHeight ) {
$maxHeight = $imgsize[1];
}
$1++;
}
forEach ( $newImageArray as $i) { ?>
<img src="<?php echo $picfile; ?>" border="0" width="<?php echo $maxWidth; ?>" height="<?php echo $maxHeight; ?>" align="left" style="border:1px solid black;margin-right:5px;">
<?php
}
Now you shouldn't really be doing this. A CSS based option would work better. You can add a wrapper container with a width on it and set the images to display:block;width:100%; and the images will always fill the space. I will edit with that solution shortly.
This will keep the image within a fixed width, and scale the image to fit inside of the box when it is too large.
HTML:
<div class="imgWrap">
<img src="http://www.captainangry.com/img/1236647133510anonib.jpg">
</div>
CSS:
.imgWrap {
width:100px;
height:100px;
float:left;
}
.imgWrap img {
display:block;
max-width:100%;
}
If you don't want to do any work in PHP then just wrap the image in a div and set overflow:hidden. This assumes that you know the height you want all of your images to be.
<div style="width:<?php echo $imgsize[0]; ?>; height:100px; overflow:hidden; border:1px solid black; margin-right:5px">
<img src="<?php echo $picfile; ?>" width="<?php echo $imgsize[0]; ?>" height="<?php echo $imgsize[1]; ?>">
</div>