how to crop an image in html? I have an image on server-pc, is it possible to put only a cropped portion on my webpage without explicitly cropping and creating a new image?
You have two options really.
1) is to use image modification scripts to reproduce a cropped image, like TimThumb (requires PHP). This will crop the image dynamically. It's unclear from your question whether you don't want a new image at all, or whether you just don't want to create one manually.
2) is to do something nifty with HTML/CSS. Basically you'd create a container for your image, hide the overflow, and position/resize the image within it. It'll be something like this...
HTML:
<div class="crop">
<img src="image.jpg" alt="">
</div>
CSS:
.crop {
display: block;
height: 100px;
position: relative;
overflow: hidden;
width: 100px;
}
.crop img {
left: -20px; /* alter this to move left or right */
position: absolute;
top: -20px; /* alter this to move up or down */
}
Related
I apologize if this has been answered time and time again. I remember searching thoroughly for an answer a couple years ago when I first wrote up my website script, but I couldn't ever find one. The same for now.
Recently I reworked my website's script so I can host it onto Weebly. Here is one of the four pages of my site that I need help with. As you can see, the images that pop up when the thumbnail is hovered over are absolutely positioned. For most computer resolutions and/or browsers, this will have the image appear out of the designated box.
How could I position them to the inner top left corner of the div? Or better yet, horizontally and vertically centered within it?
<section id="Sizes" style="float: left">
<a href="#Space">
<img class="Small" src="/files/theme/SampleD_Fun_Icon.png" width="150" height="150" alt="Sample 1: Day of Fun" />
<img class="Large" src="/files/theme/SampleD_Fun.png" width="150" height="150" alt="Sample 1: Day of Fun" />
</a>
...
</section>
<a id="Space"></a>
<span class="Popup">Hover over thumbnail to display sample artwork.</span>
<br style="clear: left" />
a:hover img.Small
{
border: 5px solid #21568b;
margin: 10px;
text-decoration: none;
}
section#Sizes a img.Large
{
border-width: 0;
height: 0;
left: 438px;
position: absolute;
top: 326px;
width: 0;
}
section#Sizes a:hover img.Large
{
height: 526px;
left: 438px;
position: absolute;
top: 326px;
width: 520px;
}
.Popup
{
border: 3px solid;
float: left;
height: 272px;
margin: 8px 20px 0px 0px;
padding-top: 254px;
text-align: center;
width: 520px;
}
Thank you for your time. :)
Your whole design is a bit fragile, and I wouldn't recommend building this this way in the first place, but you're looking for practical answers, so here's the smallest change I can think of that fixes your problem:
1) Add this to your style sheet:
body { position: relative; }
2) On line 40 from your main_style.css, change top: 326px to top: 316px and left: 438px to left: 428px, so that it becomes like this:
section#Sizes a:hover img.Large {position: absolute; top: 316px; left: 428px; width: 520px; height: 526px;}
How does that work?
Your images are place using absolute positioning. By default, that works relative to the viewport (the window). But by turning the body into position relative, it becomes a containing block, and position absolute is relative to the nearest containing block ancestor.
So now, your images are fixed within the body element, instead of being fixed relative to the window. Since the margins of the body element is what's changing size when you resize the window, that makes the various pieces of your content fixed relative to each other. You then just need to remove 10px from the top and left side, since that's the size of the border of your body element, and we're now measuring from inside the border.
TLDR: You can't do this in pure CSS.
You can easily position the image inside the container div if you place the image element inside the div element, and then use absolute positioning like top: 0; left: 0; (or with a number of other methods). But then you'd need JavaScript to correlate the hovered thumbnail with the popup full-size image.
Alternatively, you can have the full-size image be nested in the thumbnail element (like you currently have), but then you'd need JavaScript to position the full-size popup image inside the container div.
Of the two alternatives, I recommend the first: put all the popup images inside the target container, and use JavaScript to show or hide them when a thumbnail is hovered. Correlating the thumbnail and the full size image via JavaScript is going to be easier then writing positioning code.
I see you're using jQuery already so why not do something like this?
$('.Small').on('mouseover', function(){
$('.Popup').empty().html($(yourtarget).attr('img' , 'src'));
});
$('.Small').on('mouseout', function(){
$('.Popup').empty().html('Hover over thumbnail to display sample artwork.');
});
Just because everyone was saying it can't be done with pure css, I wanted to demonstrate that it can, and it is even quite easy. Have a look at the folowing example:
http://jsfiddle.net/aafa2zp5/
<div id='images-wrapper'>
<ul>
<li>
<img class='small' src='http://placehold.it/50/ff0000'/>
<img class='big' src='http://placehold.it/300/ff0000'/>
</li>
<!-- and some more similar thumb / image groups -->
</ul>
<div class='preview-area'></div>
</div>
CSS (or the relevant part at least)
#images-wrapper {
position: relative;
}
.big {
display: block;
position: absolute;
top: 54px;
right: 54px;
opacity: 0;
transition: opacity .5s;
}
.preview-area {
width: 350px;
height: 350px;
border: 4px solid blue;
position: absolute;
top: 21px;
right: 21px;
}
li:hover .big {
opacity: 1;
}
The key is to set a position relative to the wrapper (and keep all of the descendants as their default static). Then you can use this to position the preview area and the big images against by setting them to postion absolute and carefully calculating the correct postion. I even added a cross fade, just because it is so easy, but you could just as well work with display block / none if you prefer.
For smaller screens you may want to alter the dimensions and positioning inside a media query, but it still should be doable (though depending on the hover state is perhaps not the best idea on a touch device)
I hope you get the idea and you can figure out how to apply this technique to your own site. Feel free to ask if you want me to explain further or when you get stuck.
I have images being passed dynamically to the UI and they can sent as any size size. I then need to scale them to specific sizes depending on which img tag that image is going to be displayed in. These images need to be circles of a statically set size, but not ovals and when they are cropped I want the circle to come from the center of my image.
I have created a circular image using boostrap's img-circle:
<img class="img-circle" src="image.jpg" width="117px" height="117px"/>
I have many of similar images of various sizes being layed out using:
<div class="row" style="margin: -40px 10px 30px">
This is working, except my images are ending up stretched to fit the circle rather than just cropping from it. Is there any simple way I can cause them to crop vs stretch?
I'm hoping I can do this just using my img tag, as using something with "background-image" seems to mess up my layout.
Added a fiddle:
http://jsfiddle.net/jgt1qy7y/1/
You should enclose your image in a parent div.
The only thing .img-circle does is apply border-radius: 50%; It will inherit the width and the height of the chosen element. If those are not equal it will be an oval. In that case you will have to define sizes but then the images will get distorted. So that's why you need a parent div. To set the width and the height, and not distort the image.
.img-circle {
border-radius: 50%;
position: relative;
height: 117px;
width: 117px;
overflow: hidden;
float: left;
margin-right: 10px;
}
.img-circle.hor img {
position: absolute;
left: 50%;
width: auto;
height: 117px;
transform: translateX(-50%);
}
.img-circle.vert img {
position: absolute;
top: 50%;
width: 117px;
height: auto;
transform: translateY(-50%);
}
<div class="img-circle hor">
<img src="http://placehold.it/350x150" />
</div>
<div class="img-circle vert">
<img src="http://placehold.it/150x350" />
</div>
Right, as far as I can answer from the information you've provided, you're setting the image tag to have 117px in both height and width. This is the IMG tag you're changing, and so every image will be stretched TO that specification.
So, you have two options:
1) You can either set a specific width or height and allow the circle to be auto width or height, e.g
.img-circle{
width:auto;
height:auto;
width:117px;
max-height:117px;
}
On this I have set a max height of 117px so that HUGE long ones don't go overboard, but this will make them tiny in the circle http://jsfiddle.net/jgt1qy7y/8/
Or, secondly, you could create a DIV with fixed width 117px by 117px (I'm assuming you're using this as profile pictures or something?), then dynamically modify the style of the DIV to add a background image then configure that in your CSS:
.img-circle{
width:117px;
height:117px;
}
For your div. Then, you can dynamically output the URL of the image into your STYLE of the div
<div class="img-circle" style="background-image:url('echo your url here');"></div>
You can then style the background image by adding CSS to your .img-circle:
.img-circle{
background-size:contain/cover;
background-repeat:no-repeat;
backgrund-position:50% 50%;
}
You'll have to check out cropping an image in javascript if you want the image to fit exactly how you want it, but you get the jist.
Disclaimer: I've never properly learned CSS from websites, I've picked it up as I've gone along... Sorry if this is written badly!
I am using a wordpress template to control my website. On the home page is a small header with "Home About Us Contact Us" etc etc and then below that is an image that transitions to another image which transitions to another image. This image is too large for my liking so I am trying to shrink it. So I go to the CSS and adjust the image size, however because there is text on the bottom of the image it is being cut off.
I would like to maintain the image width but just make it a little shorter, say about 75% of the original design.
Below is what I think is the applicable code
.camera_wrap {
height: 672px!important;
max-width: 1920px;
display: none;
position: relative;
z-index: 0;
margin: 0 auto 60px!important;
I added the height: 672px!important; code which makes it about the height I want but again the bottom gets cut off. I would prefer to have the CSS re-size the image instead of clip it. But all of my searches haven't turned up how to do this. I am just finding the re-size attribute.
Try using a path to the img rather than the images class to control the styling for the image.
example html
<div class="image-div">
<img class="image">
</div>
instead of
.image { height: 500px; }
try
.image-div img { height: 500px; }
Also, here's an example of a fiddle and an example in that fiddle of how to affect change to only the second image using nth-child
https://jsfiddle.net/Hastig/g6m5nqc9/1/
.image:nth-child(n+2) {
height: 75px;
}
I got a question: I have an image in a div. the image is bigger that the div and it has height:100% to make it look ok. So when I do a resize image becomes bigger and it looks fine. but when I resize the browser to make it smaller image becomes smaller, but its parent saves the width of the original image. In fact it just takes the width of an image. I got a fiddle for you, just try to resize your browser or the output section to see the red background appear. I'm curious is there any chance to make the div dimenstions the same as the image's dynamically. I need the container dimensions cause I have some other elements besides the image and they use the coordinates of the div. thanks.
important! it works the way I saw it only in FireFox. Chrome's behaviour is different.
.img-wrapper {
display: inline-block;
height: 100%;
position: relative;
background-color: red;
}
.gallery-image {
bottom: 90px;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 25px;
background-color: grey;
}
img {
height: 100%;
}
<div class="gallery-image">
<div class="img-wrapper">
<img src="http://www.ibm.com/big-data/us/en/images/bigdata_homepage_maininfographic_345x194.jpg" alt=""/>
</div>
</div>
This is usually done with CSS using background-image:url("http://www.ibm.com/big-data/us/en/images/bigdata_homepage_maininfographic_345x194.jpg").. This way your image and div become one object. Then you just control the div and the background image size accordingly.
Side Note... It helps with performance as well.
You can set the minimum dimensions of an image so it won't become any smaller like this
img {
min-height: 200px;
min-width: 400px;
}
We know how to use CSS to show only part of an image within a div (i.e., image sprites), but the image has to be a background image.
We know how to use CSS to scale an image, but the image has to be an IMG.
Does anyone know of a way to scale and image and show only part of it?
For example, I want to:
show pixels (15,15) through (100,100), and
scale it up by 200%.
The first I can do by making in a background image. The second I can do by making it a foreground image. But so far, I have not ascertained how to do both. Is it even possible using only CSS/HTML?
You could scale the image just as you would normally. Then, use a container div to crop the image. To set where the crop rectangle goes, use position: relative on the image (not the containing div). Here's an example using stackoverflow's logo:
<style type="text/css">
div {
/* Set size of crop area. Setting its location happens bellow. */
width: 150;
height: 100;
overflow: hidden; /* Crop it like it's hot! */
/* not part of the implementation; only to display what's going on */
border: 1px solid black;
background-color: #ddd;
}
img {
/* Set the crop location by shifting the image
* up by 70px and to the right by 30px.
*/
position: relative;
top: -70px;
left: 30px;
/* Scale the image as you normally would. */
width: 300px;
height: 150px;
}
</style>
<div>
<img src="http://sstatic.net/so/img/logo.png">
</div>