let's say that i have an image
It's size is
height : 150px width : 100px.
I want to get a part of it, let's say the full height, but with width between 30-80px. so it will be
height : 150px width : 100px.
I don't want to scale it. I want to cut a part from it. (thanks for editing, it's called cropping).
How to do it?
There is the (somewhat little-known) clip css property, although it does require that the element being clipped is position: absolute; (which is a shame):
img {
position: absolute;
clip: rect(0 100px 200px 0);
/* clip: shape(top right bottom left); NB 'rect' is the only available option */
}
Reference
jQuery cannot modify image elements like that. Your best option would be to position it within a parent element that has overflow:hidden to give the impression it is cut. Or you can use the clip CSS rule. If you actually wanted to make a new image you could use jQuery to gather coords on the image and patch those back to a server-side script to actually do the heavy-lifting and feed the new image down asynchronously.
Image editing is beyond the scope of JavaScript. You can display only a certain part of an image, but you can't actually change the image file:
<div id="imgwrapper"><img src="blah.jpg" width="100" height="150"></div>
#imgwrapper {
width: 100px;
height: 50px;
overflow: hidden;
position: relative;
}
#imgwrapper img {
position: absolute;
top: -30px;
left: 0;
}
Note that with this solution, the inner image is absolutely positioned but the outer div is relatively positioned, which may suit your page layout better than an absolutely-positioned and clipped image.
I think your best bet is to try and use a html canvas.
http://www.w3schools.com/html5/canvas_drawimage.asp
http://www.w3schools.com/html5/canvas_getimagedata.asp
Both allow for rendering parts of a source image, the getImageData() function also allows to read back the image data and manipulate it (for the whole image or parts of it).
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 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.
On the World of Warcraft forums they have a neat style set up that I'd like to emulate. I didn't know how to do it, so I decided to dig through their stylesheets and grab the pieces of it and put them together to learn how to make a style similar.
When digging through the stylesheets, I found this image. As you can see, it's the background for their forum posts, but it's a fixed size. Here's my question - how are they dynamically creating more length if a user's post is much longer than the picture is?
On a test website I grabbed the same CSS they used for that section. They have it set on overflow:hidden; so that it doesn't keep multiplying the image. Naturally, copying parts of their code gets me this mess on the test website.
It works correctly for smaller posts, since they just have to cut it off, but I'm assuming they have maybe a very thin (set width, perhaps 1 pixel in height) .jpg image that they are multiplying depending on the size of the forum post.
Does anybody know how I might go about doing this?
P.S. Naturally I'm not going to be using their images and such - I'm only copying it for now just to understand how to make my own.
Something like:
CSS:
.post
{
background:#1A0F08 url(http://us.battle.net/wow/static/images/layout/cms/post_bg.jpg) top no-repeat;
}
(the image and the color are those really used, hope they don't sue me for that :) )
is what you're looking for. The background image is positioned on top and stays there, while the rest of the container's height has the same background color that the image fades to (using a gradient). So it's just an illusion of a stretched image, but effectively is just that you don't see the interruption where the image ends
It looks like their background color for the post is the same as the color at the very bottom of that image. That way it just "fades" in - the image does not actually change size.
Example CSS would be:
#yourPostSelector {
background-image: url('path/to/image.jpg');
background-position: top left; /* or 'top center' - whatever works for you */
background-attachment: scroll;
background-color: #000000; /* pick the bottom color of your background image */
}
Just change you background color which you have used is #00000*
It should be changed to the color of the background image which you use, basically the bottom part so that it blends perfectly. Presently as per your present image the code would be like this :-
.body {
background: url("../images/post_bg.jpg") no-repeat scroll 50% 0 #1A0F09;
clear: both;
height: 100%;
margin: 0 auto;
overflow: hidden;
width: 990px;
}
Update this class and check the result, if you don't understand comment here would make you understand.
I am looking for something that would allow me to render an uploaded image with a 3D perspective and a wrap effect like here.
This will be in the form of a cropping preview using a jQuery library such as jCrop
Currently I was able to achieve the 3D perspective using Reflex.js but looking for a more subtle solution with the wrapping effect as well.
Any help will be appreciated :)
Thanks in advance!
Your requirement of IE9 support basically mandates a canvas approach if you want to keep it client-side. You could of course do the rendering server-side and AJAX load the rendered image back in which will work in every browser.
If you decide that you can dump IE versions less than 10 (or at least just show them the normal photo without the transform then you can do the wrap-around effect with a combination of CSS 3D Transforms and CSS2 clip. Something like:
<!DOCTYPE html>
<style>
body { margin: 100px; position: relative; }
.edge { width: 20px; height: 196px; background-size: auto 100%; position: absolute; left: 30px; top: 2px; transform: perspective(600px) rotateY(-45deg); transform-origin: right; }
.panel { position: absolute; left: 31px; top: 0; clip: rect(auto,auto,auto,20px); }
.panel>img { width: 350px; height: 200px; transform: perspective(600px) rotateY(30deg); transform-origin: left; }
</style>
<div class="edge" style="background-image: url(my_image.jpg)"></div>
<div class="panel"><img src="my_image.jpg" /></div>
To break that down, we’ve loaded the user’s image and dropped it into the page, along with a div with the same image set as a background. That div is set to be a thin width and a height that’s almost as tall as the main image. We can use the background-size property to foce the background image to fit the div even if it’s taller.
We then absolutely position those two so that they’re next to each-other. The CSS2 clip property lets us clip off the left 20px of the image so that at this point the div and img look like one image together.
Finally, we set a perspective and transform-origin for each block and rotate them away from each-other around the Y axis. Because of the clipping we have to fudge the .edge block to be slightly smaller than originally (with a 200px tall image I had to drop it to 196px to look good) but that works pretty nicely for me.
Obviously you’d need to fill in the vendor prefixes (-moz-, -ms-, -o-, -webkit) and I’ll leave the shadow as an exercise for the reader (a simple background on the container would probably do).
Hello everyBody
I've created a slideShow (with left and right arrows) , displaying images in three set, images are aligned horizontally, and every image is contained in a li element with a link (headline) as follows:
<li><image src="image_n.jpg"></image>Google search engine</li>
ok my question is , how can I put the headerline ("a" tag) so it covers the bottom of the image using css.
thank you
I'd use a combination of display: block and either a negative top margin or position: relative and a negative top.
li a /* or a unique identifier if it's just this instance */
{
display: block;
margin-top: -1.1 em;
}
or
li a
{
display: block;
position: relative;
top: -1.1em;
}
I'm using em as a unit because 1em is equal to the font size. This means that margin-top: -1.1em will be (approximately) a little bit more than the height of one line of text.
Instead of using an image tag, I would suggest using the background-image CSS property on the list. That way, the text will just flow over the image naturally.
You have one of two options:
Wrap the Image tag with the anchor tag like so:
<li><image src="image_n.jpg"></image><psan class="caption">Google search engine</span></li>
Remove the image tag and define the image in the background:
<li><image src=""></image>Google search engine</li>
I prefer the latter of the two.