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>
Related
I'm working on a small project, and have one little problem that I don't know how to resolve myself. I have an image gallery with many images, but I want the active image to be centered, without changing the resolution or width/height ratio. Link for the issue here. Login is user / password. I tried to manipulate with this CSS:
.img {
margin-left: 200px;
}
However, it seems to ruin the bottom slider. What should I do to center the main image without changing the image ratio? This example image shows what I want to do.
Try this
.imgs {
margin-left: auto;
margin-right auto;
}
or you could do this
<div class="imgs" align="center">
<img src="https://source.unsplash.com/random/200x200" />
</div>
Try adding:
.flex-active-slide {
text-align: center;
}
I'm putting an image inside bootstrap's panel but no matter what I do, the panel's height always adjust to the image's height. How do I make a fixed panel height and how do I make the image's height adjust to the panel's fixed height?
If your panel already has a fixed height and your image is inside the panels div, just add a style of:
height: 100%;
to your image.
Example:
<div class="test">
<img src="test.jpg">
</div>
And your css:
.test {
background-color: red;
height: 50px;
}
.test img {
height:100%;
}
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 need to fit and crop the image into it's wrapper.
<div class="box desktop-3 tablet-3 tablet-ls-3 mobile-3">
<div class="inner-box fullbox">
<a href='#module'>
<div class="image-wrap" >
<img src="../img/placeholder.png" />
</div>
</a>
</div>
</div>
css
.box {
width: 282px;
min-height: 282px;
padding: 10px;
float: left;
}
.inner-box {
width: 100%;
min-height: 282px;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
padding: 20px;
}
.fullbox {
padding: 0px;
}
.image-wrap {
...
}
i've tried to put the image as the background like you see below, but that didn't worked for me. I want to have a image section from the image that it fits into the box.
.image-warpper {
background-image: url(...);
background-repeat: no-repeat;
background-size: contain;
}
Do i have to crop the image via php or is it possible to scale or crop it in css?
Thanks
"Do i have to crop the image via php..."
Depending on the Image file-size its strongly recommendable to use PHP for this purpose.
Remember the clients browser will always load the complete image to resize it to the css given values.
So even if you got a style telling the image shall never exceed 100x100px the client's browser will load the full size image.
That could take "very long" if its a giant image (referring to the file size).
There are pretty nice classes/libs you can use with PHP to get a comfortable and easy way to play with images. And your page will be much faster then.
For example i recently found:
http://wideimage.sourceforge.net/
Super sweet thing. Supports chaining and stuff.
You should be able to do this:
.image-wrap img { max-width:100%; height:auto; }
This will constrain, and scale down the image, and set it to be 100% wide, according to however wide the parent element is.
Having in mind that you'll use an img html tag, make the image wrap div in position:relative and overflow:hidden and the image with position:absolute and height:100%, width:auto (or width:100% and height:auto). This way the image will be cropped in the parent container and keep its ratio.
See this demo and resize the frame to see how the image is cropped and resized in various dimensions.
I am adding images into a page that are all different aspect ratios (some wide, some tall etc).
what is the best way to get all the images to display the more or less the same size but not be squashed/stretched?
I have tried
<img src='admin/userpics/$prodID.jpg' height='50%'>
This doesn't seem to make images the same?
I'd use CSS.
img {
max-height: 200px;
max-width: 200px;
}
simply set the width or height to a fixed value, and the other value to auto
<img src='admin/userpics/$prodID.jpg' style='width:100px;height:auto;'>
or
<img src='admin/userpics/$prodID.jpg' style='height:100px;width:auto;'>
what ever you prefer, the aspect ratio with be always correct
If you don't like img tags (as me), you could use this (if you won't target <= IE8 as Brad pointed out):
div.image {
background-size:cover;
background-position:center;
display:block;
width:30%;
height:30%;
}
<div class="image" style="background-image:url(admin/userpics/$prodID.jpg)"></div>
Proof: http://jsbin.com/ekogaz/1/edit See how the image always stays in center, but still is cropped. You can add as many of these as possible. Also, you can use % (or like 100px). Try to resize the window and you'll see that it works then too.
<img src='admin/userpics/$prodID.jpg' style='height: 200px; width: auto;'>
Use values in pixels, instead of a percentage. Like this:
<img src="smiley.gif" alt="Smiley face" height="42" width="42">
You already got many useful answers for displaying resized images with html/css, but i would recommend you create thumbnails and use them instead. That way you will avoid loading the full resolution images even if you just need small resolution thumbs, which is important especially if the images are in high resolution or you are building some kind of gallery. Also you will have control over the quality of downsampling done on your image, which is much better then some browsers do. Since you use PHP check out this library for example: phpThumb
You can define the maximum width and height you want to use, and resize image keeping the aspect ratio.
http://jsfiddle.net/7TDCA/
HTML:
<div class="img-wrapper">
<img src="http://i.imgur.com/Himba.png" alt="" title="" />
</div>
<div class="img-wrapper">
<img src="http://cdn.fotocommunity.com/Natur/Tiere/Pfau-Hochformat-a18613762.jpg" alt="" title="" />
</div>
CSS:
.img-wrapper {
margin: 50px auto;
width: 50%;
height: 250px;
overflow: hidden;
}
.img-wrapper img {
width: 100%;
height: auto;
}