I want to display image in fixed size without changing the aspect ratio.
I wanna display images in this size 200px * 200px, while keeping the original aspect ratio. All the images here are larger than 200px * 200px.
I want to crop the image from center and set width and height as 200px, without changing the aspect ratio, which means we only want to display some part of the image.
Could anyone tell me how to realize it? I've tried CSS using max-width and max-height but seems CSS couldn't help.
I use PHP as server-side language. I heard someone suggest GD. Any ideas?
This should solve the problem
HTML
<div>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" />
</div>
CSS
div {
width:200px;
height:200px;
overflow:hidden;
position: relative;
}
div > img {
width:300px;
height:auto;
position:absolute;
top:-100px;
left:-100px;
}
Here is a DEMO
Related
i'm with a trouble in relation with treatment of image, using intervention image on laravel. The problem is: I have to change aspect ratio of a image, but, in my current way, i'm cropping the image to do it, and important things in this element is being cropped too. So, i was wondering, is it possible add border around on image to create the aspect ratio? If you all would can help me, i'll would be very glad with that.
P.S. Sorry for my english, i'm still learning, haha.
Solution 1
Create a div with the right aspect ratio/dimensions and load the image as a background image with background-size: contain.
div {width: 300px; max-width: 100%;}
div > div {
width: 100%;
padding-bottom: 60%; /* use this for the aspect ratio */
background: black url('http://jekyllcodex.org/uploads/grumpycat2.jpg') center center no-repeat;
background-size: contain;
}
<div><div></div></div>
Working demo: https://codepen.io/anon/pen/ooBaKe
How it works
The padding bottom creates the height for this div (as it has no content). The padding-bottom percentage is the percentage of the width of the parent. Thus, a 2:1 ratio image has a padding-bottom of 50%. A 3:2 ratio image has a padding-bottom of 66.66%.
Why this works
The div inside this div has a width of 100%. This is 300px, as the child div is constrained by its parent. The padding bottom percentage is relative to containing block, and not (as many people think) to the body. Here the containing block is the nearest block-level ancestor, which is the parent element. Note that it would be relative to the body if we used just one div with a fixed width of 300px.
Why this solution is not perfect
This solution is fully responsive, due to the max-width of 100% on the containing div. And if you change your mind and you want images to be cropped instead of contained, you only need to change the background-size to 'cover'. Therefore this looks like a good solution. However, a background images is not a proper image, as it has no 'alt' text and lacks a DOM representation, resulting in all kinds of accessibility problems.
Solution 2
Create a div with the right aspect ratio/dimensions and load the image as img tag with max-width and max-height.
HTML
div {
width: 300px;
max-width: 100%;
position: relative;
}
div > div {
width: 100%;
padding-bottom: 110%; /* use this for the aspect ratio */
background: black;
}
div > div > img {
max-width: 100%;
max-height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div>
<div>
<img src="http://jekyllcodex.org/uploads/grumpycat2.jpg" />
</div>
</div>
Working demo: https://codepen.io/anon/pen/yPgQKJ
About this solution
It works roughly in the same way as the previous one, but this solution is semantically correct. The difference here is that an image element is positioned absolute in the inner div. Its placement is absolute, but relative to its parent at 50% of the left border and 50% of the top. Then the image placement is corrected for its width and height, using the translate function of CSS (otherwise its top left corner would be in the middle of its parent). Because only max-width and max-height are used (and not width and height), the image stays responsive and keeps its aspect ratio.
I need to crop wordpress thumbnail like in the image below, i.e., crop piece of image from left top corner, without scaling of image.
Can I do this without plugins?
Here's an example of how you'd crop to the top-left of a much larger <img> using a parent container.
.crop {
width: 200px;
height: 200px;
overflow: hidden;
}
<div class="crop">
<img src="http://i.imgur.com/pRSJBDI.jpg" />
</div>
I have a table for member. When i display all image in html I put and all of them are displayed with the same size but when I put class='img-responsive' they go back to their original size.
Ok I now understand what you were asking. So let me explain.
All images have something called an aspect ratio. This can be 1:1 which means for every 1px(or whatever your unit of measurement is) there is 1px on the other side. Then 1:2 so for every 1px there is 2px on the other side and 1:3, 1:4 ...etc.
The ratio you would like to have is a 1:1 ratio that is 100px * 100px.
But this cannot be forced from an image with another aspect ratio without distorting the image. Companies like facebook do this by either creating cropped versions of the image or giving it a background-size of cover.
My recommendation would be to create a div with a height and width of 100px and set the image as a background image as follows:
.divClass{
background-repeat:no-repeat;
background-size:cover;
width:100px;
height:100px;
}
Next add the following to your php code
<div class="divClass" style="background-image:url('image/location/<?php echo $imageName; ?>');">
This would allow the image to fill the div fully while keeping the aspect ratio. The downsides would be that some of the image would not be visible if the aspect ratio of the image is not 1:1 which is what you are trying to achieve. Also if you would like to change the position of the image you can use the background-position Property.
If you would like to be able to see the entire image you can add a popup box.
jQuery: How can I show an image popup onclick of the thumbnail?
Your final solution would be to crop the images or allow the user to crop the image before they upload. Below is a great plugin that allow this.
https://fengyuanchen.github.io/cropperjs/
If you want to force the width/height of the img element you can use :
img {
width: 100px;
height: 100px;
}
In case you are using some other libraries that override default css behavior you can use !important:
img {
width: 100px !important;
height: 100px !important;
}
The img-responsive class from bootstrap will set:
max-width: 100%;
height: auto;
To the image, and if you want a specific width/height - this is not what you are looking for.
I am making a project in which I am using a cover picture like Google+.
approx Full on screen but when I upload small size pictures or very large size pictures, it stretches or compress in preview.
simple tag I am using to fit in my box is
<img src="coverphotos/1291384_4846629064030_1548133592_o.jpg" height="530px" width="1024px" style="border-width: 0px; margin-top:-4px">
Very very important. I wanted to make a cover picture on my project but i am getting irritated because its stretching, and making picture ugly, how Facebook,Google+ upload a cover picture without stretching?
Preview.
http://www.tiikoni.com/tis/view/?id=479959b
I don't want it to get stretch, while uploading on fb and google its works osm
Either set the height to 530px OR set the width to 100%, don't do both together.
The picture will not be stretched and will maintain its aspect ratio. :)
This: height="530px" width="100%"
You're telling the picture to take the full width of its parent and to be exactly 530px high. What you probably want is unconstrained height on the image, but constrained height on its parent with overflow: hidden.
Take a look at this article: Perfect Full Page Background Image
Based on your link, this css fixed the issue.
body {
width:100%;
margin: 0;
}
center {
width:100%;
}
center img {
width:100%;
height: auto;
}
Wordpress uses a function to center completely the image on a thumbnail when you are editing a post so it look like this when i´m editing the post:
i´m trying to show the image that way on a wordpress page but I don´t know how to create a function like the one that uses wordpress to do that:
$s_x = floor( ($orig_w - $crop_w) / 2 );
$s_y = floor( ($orig_h - $crop_h) / 2 );
So this is how it looks in my page:
it just shows from the top, so it cuts the image, no center or resize
this is my markup:
echo '<div class="aimagediv" >'; //
echo '<img src="'.$s['project_image'].'" alt="" width="270" />';
echo '</div>';
i´m limiting the width just to show something, i know it´s wrong to do it that way, that´s why i´m looking for a function to rezise and center the image over the div.
Can someone help me with this one?
I think you're better to put this image as a background image of the div and then using css to change background-size to cover and then background-position to center...
HTML
echo '<div class="image" style="background-image:url(\''.$s['project_image'].'\');">';
echo '</div>';
?>
CSS
.image{
width: 270px;
height: 270px;
background-size:cover;
background-position: center;
}
Here's a jsfiddle showing it in action:
http://jsfiddle.net/Jhu2Y/
will this div have any other content besides the image? you could use CSS to define a height/width for the div and set the image as a background image with a background size of cover... like this:
** EDIT -- Adding PHP tags before and after since the OP was using echo **
<?php
// do all the php code here that you want before the image div
?>
<style type="text/css">
div.aimagediv {
height:270px;
width:270px;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
}
div.aimagediv:hover {
cursor:pointer;
}
</style>
<div class="aimagediv" style="background-image:url('<?=$s['project_image']?>');"></div>
<?php
// do the rest of your php stuff here
?>
Then if you want to make the div clickable you could use an onclick like this: (replace the div line above with this one)
<div class="aimagediv" style="background-image:url('<?=$s['project_image']?>');" onclick="window.location='page_id=42&slide=<?=$i?>';"></div>
It's container probably has a limited height. So When you set the only witdh, it will stretch the image to fit that width, maintaining the aspect ratio.
If you set only the height, it's the other way around.
If you set both width and height it will stretch the image to fit those bounds (and thus maybe screw up the aspect ratio.
So in your case, set the height, or set both (but make sure you got the ratio right)
if you want the image to center relative to it's container, use CSS to set the left and right margin to auto