Auto-Resize Image to fill div - javascript

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.

Related

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

How to make same sized thumbnails

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.

How to make my image gallery width responsive to div below it?

I have an image gallery with name slider1_container and it's style properties are specified within the HTML code such as:
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width:700px;
height: 600px; background: #191919; overflow: hidden;">
This works perfectly, except that the slider is wider than the div box beneath this. This div box is 100% of the width of the parent class "rightcolumn", and my slider1_container div is ALSO within this class, but since it's width of 700px is set within the HTML code, it doesn't seem to be responsive at other viewport sizes.
I've tried to use media queries at various points to change the width of the slider1_container to something smaller than 700px, but it seems that the width specified in the HTML code overrules that.
[DEAD LINK REMOVED, PLEASE UPDATE]
If I set the 700px to auto, the width works perfectly BUT the image gallery shows only black when you load the page, until you choose another photo it will quickly appear (javascript issue it sounds).
If you resize the viewport on my site you can see the image gallery's width doesn't match the div box below it How can I make this responsive like the other div?
Thank you!!
Read the documentation for whatever slideshow plugin it is that you are using. It most likely has settings for responsiveness. If not, you can find a million different responsive slideshow plugins here

How to shave off parts of image based on window size

I have an image, see below:
http://bookyoursite.com/images/bysheaderpic.png
The Image is a page banner with the title of the page starting around the middle of the picture.
What I have currently is
#banner {
background-image:url('/images/bysheaderpic.png');
background-repeat:no-repeat;
background-position:right bottom;
height:191px;
max-width:1080px;
min-width:550px;
width:80%;
}
What happens is that when the window is resized, the image is shaved off of the right, and cuts off the first part of the title. If I use
background-position:center bottom;
it cuts off of both sides equally, resulting in the .com being cut off.
What I need is the image to shrink (when the window is resized) such that the title of the page remains visible. To do this, the background needs to be "attached" around the 2/3 mark to the middle of the container
I've played with the background-attachment and background-position attributes to no avail. Is there a way to do this without using javascript?
You can try to use:
background-size: cover;
Read more about background-size property at MDN.
Also you can do this by making your image 100% width and height and insert it inside your container.
HTML:
<div id="banner">
<img src="http://bookyoursite.com/images/bysheaderpic.png" width="100%" height="100%">
</div>
CSS:
#banner {
height:191px;
max-width:1080px;
min-width:550px;
width:80%;
}
Have you consider a css maskand some width and max-width with percentage
something like:
-webkit-mask-image: url(image.jpg);

resize image to the height of it parent and resize it on window resize

i need help with my code
this is my example - http://jsfiddle.net/urK7t/
and full size page - http://dev.fama.net.pl/tides/
concept:
i would like to have 100% width and 100% height, overflow:hidden DIV with wide image in it witch i can move left and right, this image should resize on window resize, now as u see in my examples is just stretch image height and i would like to resize whole image but i dont want to show whole image it need to be move left and right
The styles you want for your image are these:
#bg-image {
width: 100%;
height: auto;
}
In the future, the CSS property you really want is object-fit: http://www.netmagazine.com/tutorials/control-image-aspect-ratios-css3
you can say if you have this image as background to be contain or cover or even to be 100% 100% etc, depends if you want it scaled or just full screen, etc.

Categories