How to make same sized thumbnails - javascript

I'm having a hard time now trying to make same sized thumbnails,
I have a simple gallery script that just takes all images out of database and places them to the page with max width 150px and max height 150px.
Now , it looks weird because all images have different shape, is there any way to make them same size without breaking the image apart? The simplest way possible please.
I don't want to have an option on uploading step to chose dimensions for thumbnail.

With img you only have two options: Set a maximum width, or a maximum height. Either way you won't get reasonably-sized thumbnails: If you set the maximum width, then some images will be too tall. If you set the maximum height, then some images will be too wide. If you set both width and height, it'll get horribly distorted, because it will ignore the aspect ratio.
Instead, I suggest making a div of a fixed size and setting the thumbnail as its background-image, then setting background-size to cover. This will give much better thumbnails, as it scales and crops the image to make it fit. If you want to avoid cutting off the image's edges, give the div a background-color and set background-size to contain, which instead scales down the image to make it fit and creates a "letterbox" effect.
Putting it all together (plus thumbnail centring for the crop, and inline-block so it acts like an <img> tag does):
<style>
.thumbnail {
background-color: black;
width: 250px;
height: 200px;
display: inline-block; /* makes it fit in like an <img> */
background-size: cover; /* or contain */
background-position: center center;
background-repeat: no-repeat;
}
</style>
<div class=thumbnail style="background-image: url(image1.jpg);"></div>
<div class=thumbnail style="background-image: url(image2.jpg);"></div>
Here's a jsfiddle demo for cover: http://jsfiddle.net/tbeog5o9/24/
And here's a jsfiddle demo for contain: http://jsfiddle.net/tbeog5o9/25/

There is another nice way to achieve this using object positioning
.thumbnail video, img {
width: 100%;
height: 100%;
object-fit: cover;
}
Please have a look on this article for details

Do all of your images have the same aspect ratio? The aspect ratio is the width divided by the height.
If all images have the same aspect ratio, you can scale them to the same shape by choosing a width and calculating the height, or choosing a height and calculating the width.
If the aspect ratios differ, there is no way to fit the images into the same shape without mangling images. There are two ways to mangle an image:
Cut off part of the image so that it fits your chosen shape.
Squeeze or stretch the image into your chosen shape.
If you don't want to mangle your images, you must preserve their aspect ratios. This means, indeed, that the thumbnails will have different shapes. You may think that this looks weird, but most people think it's even weirder when thumbnails are truncated, squeezed, or stretched in order to fit them into a uniform shape.

My jsfiddle example: http://jsfiddle.net/larryjoelane/tbeog5o9/38/
<img class="resize" src="http://cdn.moneycrashers.com/wp-content/uploads/2012/03/apple-imac-27.jpg"/>
<img class = "resize" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR-pya5LcLCg82HTG3R36aS9B59SSjNzewp8tAHFZrjFjRb1rXI"/>
CSS:
img.resize{
max-width:150px;/*rendered height will be 103px and width will be 150px*/
}
You will have to change the img tag url's in my example to match your image url's of course and add the class resize to your img tags.
The rendered height of the image will be 103px but the image will not look distorted.

Related

Any ideas on how to fix image sizing without changing the original image

I have a avatar image for company logos. I want it to be round but due to sizing of the images it cuts off some of the image. I have thousands of these logos and I am looking for any Ideas on how to fix this.
The Ideal end result would be the logo centered in the circle with the least amount of overlap. I though about just adding extra background space and making the image smaller unfortunately the logos have different color backgrounds. Thanks for your time!
div {
border-radius: 50%;
width: 200px;
height: 200px;
outline: 2px dotted black;
overflow: hidden;
}
img {
height: 100%;
}
<div>
<img src="https://www.vectorlogo.zone/logos/stackoverflow/stackoverflow-tile.svg" alt="logo">
</div>
Use object-fit: cover.
Example:
img {
width: 200px;
height: 300px;
object-fit: cover;
}
The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container.
This property tells the content to fill the container in a variety of ways; such as "preserve that aspect ratio" or "stretch up and take up as much space as possible".
The object-fit property can take one of the following values:
fill - This is default. The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit
contain - The image keeps its aspect ratio, but is resized to fit within the given dimension
cover - The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit
none - The image is not resized
scale-down - the image is scaled down to the smallest version of none or contain

Auto-Resize Image to fill div

I have an image inside of a div which I need to have as large as possible. I have tried using width: 100% and height: 100% and the same for max-width and max-height but that has not worked. The reason these are not working is because my images are various sizes, some tall and some wide. Is there a way to have the image resize so that it will be as wide as possible without having height extend the div?
Basically: width:100% unless that makes height greater than 100%, in which case I want to use height:100%.
You might want to use the object-fit: cover; css rule for your image.
This is pretty much the equivalent of background-size: cover if you are working with backgrounds.
Be awere that the rule will "crop" parts of your image, depending on the ratio.
UPDATE:
If you don't want to crop anything from the image, you can just use height:inherit; and position you image somehow to fit all styles (perhaps center)
This will maintain the ratio and will expand the width as much as posible.
One of the more elegant solutions is to set the size of the div, then set its background to url(foo) cover. This chops off the edges if need be. Using contain instead of cover does the same, but without chopping off the edges.
Edit: Per comments, I suggested using object-fit: contain. No need to downvote over my suggestion to use a background image.
When either width or height is set (not both), the one that is not explicitly set will automatically adjust to keep the image in the correct proportion. All that is needed to have a responsive image (one that scales to its parent element's size) is to simply set either (not both) of the following:
width:100%;
height:100%;
And, of course, the parent element must also have a width or height that is responsive as well. If the parent can never resize, then the child won't ever resize.
To ensure that the height never gets bigger than a certain amount, that's when max-height would be used on the image or just height and overflow on the image container.
Here's an example:
#container {
display:flex;
}
div:not(#container){
width:25%;
height:100px;
border:1px solid black;
overflow:hidden; /* ensure height is consistent */
}
/* Comment the following out temporarially to see the native image sizes */
img {
width:100%;
}
<div id="container">
<div><img src="https://static1.squarespace.com/static/54e8ba93e4b07c3f655b452e/t/56c2a04520c64707756f4267/1493764650017/"></div>
<div><img src="http://static.boredpanda.com/blog/wp-content/uploads/2016/08/cute-kittens-30-57b30ad41bc90__605.jpg"></div>
<div><img src="https://lh3.googleusercontent.com/fa44expvfZrMe6nIG7n_7mblJJbI1FGaAJledcdzZjaLPzntm2rUWr2_4xxRXGadre41CdqyGHE=s640-h400-e365"></div>
<div><img src="https://fthmb.tqn.com/INZEtkWYEpsZaksoewT_mA4DREo=/960x0/filters:no_upscale()/about/Two-kittens-GettyImages-559292093-58822e4f3df78c2ccd8b318c.jpg"></div>
<div><img src="https://i.ytimg.com/vi/w6DW4i-mfbA/hqdefault.jpg"></div>
</div>
As I understand you need the image to fill the div regardless of different sizes right?
Give <div> container any width and height you want.
Give <img> elements width:100%.
height will be adjusted automatically.
If you want images to wrap after each other use display:flex property on <div> container.

CSS Scaling a svg using flexbox

I got a problem with scaling my svg pictures. Actually, I'm creating a design for a html cardgame.
Here is a picture of the window:
The scaling is correct, because there is enough space in both directions, so the svg fills the space.
But when I'm gonna resize the window and the width gets smaller and smaller, something like that happens:
So, the scaling of the picture svg itself is correct, but html/css thinks that the image is the whole part inside of the displayed border lines. I just took the image with a drag'n'drop to visualize the problem.
HTML: (just a part, here the last row)
<div id="playerRow">
<img id="playerCard2"/>
<img id="playerCard3"/>
<img id="playerCard4"/>
<img id="playerCard5"/>
</div>
CSS:
#playerRow{
display:flex;
flex-direction:row;
justify-content: center;
align-items: center;
background-color: forestgreen;
border-style: solid;
border-radius: 20px;
height: 45%;
}
#playerCard1, #playerCard2, #playerCard3, #playerCard4, #playerCard5 {
min-width:0px;
min-height:0px;
height:90%;
margin:1vh;
border-style: dashed;
border-color: #555555;
border-radius: 15px;
}
I'm quite sure that there is a mistake with the height. Because when I put the height from 90% down to 40% it looks better for the resized width-low window.
I tried to use max-height instead height, but that doesn't make any difference.
What could be the problem? I just want to scale the border lines to the size of the image. I tried also with javascript a kind of rescaling, but the problem is, that I can't get the height of the svg, it always takes the whole part. Furthermore, I also want to know if that problem is possible to solve only in CSS.
EDIT:
The last row with the ratio css trick:
I solved my problem.
First of all, I used the CSS-ratio trick, which is described here: Responsively change div size keeping aspect ratio
But the problem still appeared, because the width was responsible for the resolution. So when the width grows, the height grows too, that's correct, because it always takes care of the defined ratio. The only thing is, that the correct width has to be calculated.
So, everytime the window has been resized, the width has to be recalculated. I'm doing that with javascript:
function correctRatio(card, div){
width =$(div).width();
currentHeight = $(div).height();
wrongWidth = $(div).width();
newWidth = 9/14 * currentHeight;
if(wrongWidth+1 > newWidth){
newWidth = newWidth/(width/100);
}else{
newWidth = 100;
}
$(card).width(newWidth+"%");
console.log("Setted Width:" + newWidth);
}
The 9/14 resp. 14/9 is in my case the ratio 9:14
You should be able to have the card containers keep their aspect ratio using this trick.
Responsively change div size keeping aspect ratio

Is there a Way to Cut Sprites at High Resolution (x-px, y-px) and then have <IMG width="" > Resize? [duplicate]

I'm generating CSS sprites. I want to use these sprites at multiple sizes. I've searched but haven't been able to figure out how to functionally scale a CSS sprite--e.g. if the original sprite is at 150x150 and I want to display it at 50x50, how can I do that? background-size seems to break it.
I can just generate the sprites at the needed sizes, but when I do this via ImageMagick's -resize I take a noticeable resolution hit. Usually, if I find an image is unacceptably low resolution on a webpage, I just make a bigger image and scale its size, functionally increasing the resolution of the image.
Since I can't figure out how to scale a CSS sprite, I'm a bit stuck--how can I achieve arbitrary resolution using a CSS sprite?
The most elegant way you can do this is by using CSS3 background-size, but this is not supported on all browsers (e.g. IE<=8). You might look into IE specific transforms or filters that you can use and then add the -mz-, -webkit-, and -o- selectors to get the effect you want on the browsers you are targeting.
The least elegant way to do this is by faking the sprite scale and positioning.
The HTML
<div class="ex3">
<img src="http://www.placekitten.com/g/600/400"/>
</div>
The CSS
.ex3 {
position: relative;
overflow: hidden;
width: 50px;
height: 50px;
}
.ex3 img {
position: absolute;
top: -25px;
left: -25px;
width: 150px; /* Scaled down from 600px */
height: 100px; /* Scaled down from 400px */
}
The Fiddle
http://jsfiddle.net/brettwp/s2dfT/
I know of no way to change the size of a CSS sprite, sorry.
As for generating the CSS Sprites, try:
http://spriteme.org/
Or for general image editing:
http://www.gimp.org/
You could edit the individual image components, and then use SpriteMe to generate the Sprite. You don't want to generate the sprite and then resize the entire Sprite image, as then your CSS positions for each individual element would be thrown off.
The options I see are:
Either have the sprite's contents in different sizes in one sprite.
Or take the original sprite and manually resize it one time to create a smaller copy of it. Then reference the smaller sprite version for when you need the smaller images.

Scaling div size with background image whilst keeping aspect ratio

Come a bit unstuck here.
I've got a div thats approx. 2000px wide by 800px tall.
Inside that div I have another div, with a background image.
I want the internal div, to take 80% height of the parent container, and for the width to keep proportion with the height, so the background image doesn't distort, if this makes sense?
Im using CSS3 to scale the background image 100% both x and y.
.internal-box {
background:url(images/elevator.png) repeat scroll 0 0 transparent;
background-size:100% 100%;
height: 80%;
width: auto;
}
http://jsfiddle.net/JbmE6/
Try this:
background-size: contain;
background-repeat: no-repeat;
However note that this might not be fully supported in all browsers such as IE8.
Also note that this doesn't make the <div> itself any smaller, it only makes the background image appear in only the relevant portion. If you put a border on .small you will see in fact it is 100% width of its container.

Categories