Problem size images in chrome & android

[laura_billiau]

Hi everybody,

I have a little problem with my gallery’s images. There size doesn’t keep good ratio on chrome and android. That’s working very well on Firefox but that’s it.

I’am not talented in JS, so my imageResizer.js it’s part of few code that I found (I know, it’s terrible, but everyone’s got their own vocation, and mine it’s definitly more graphic…

So, my problem. I would like, for all my images : to adjust the width of my image if this one is lower than this container, with a min-height to 300px ( heigth of the container of my image). Can you help me ?

There is a link of my site : http://www.lobill.fr/test/illustration_digitalpainting.html

And part of my js :

$(document).ready(function() {
    $('.gallery-item img').each(function() {
        var width  = $(this).width();
        var height = $(this).height();
        var parentWidth  = $(this).parent().width();
        var parentHeight = $(this).parent().height();

        if(width/parentWidth < height/parentHeight) {
            newWidth  = parentWidth;
            newHeight = newWidth/width*height;
        }
        else {
            newHeight = parentHeight;
            newWidth  = newHeight/height*width;
        }
        
    });
	
	
});

My apologize of my english…

Thank you,

LoBill

[Gandalf]

Hi there

Perhaps I am missing something, but if you are just resizing the images for displaying can you not do this with CSS?

[laura_billiau]

If I pass by css, my images are distorted, or their height is too short, like this :

[Gandalf]

@laura_billiau

my images are distorted

Perhaps there’s an error in your CSS then?

For what it’s worth, I don’t see your site as working in Firefox on Linux - as the screen width gets smaller, the images become narrower but the height stays the same.

[laura_billiau]

Hey Gandalf, thank’s to answer me

I modify my css, and it’s seems that’s better now. However my images doesn’t take the all cover of their container. I’m wonderwing if there is not an other solution than background-size:cover

[PaulOB]

@laura_billiau

I’m wonderwing if there is not an other solution than background-size:cover

If you want to support only modern browsers you can use object-fit:cover on the image but the image and its parent containers would need to be set to width and height of 100%.

e.g.

#galerieConteneur div.gallery figure {height:100%}
#galerieConteneur div.gallery figure img{
height:100%;
width:100%;
object-fit:cover;
}

Note that this does not negate the laws of the known universe and your image will not magically fit the box unless its aspect ratio is exactly the same size as the box you place it in.

The image will fill the box and it will maintain aspect ratio but in order to do so the width or height will be manipulated by the object-fit rule so that both dimensions fill the area required. This may result in some of the image being cropped in order to do so. This is not a limitation of css but purely the laws of physics.

[laura_billiau]

Hey PauOB,

thank’s you very much for your answer, I will try your solution

I think I did not express myself well, I know the image will be crop, that’s the aim ^^

"If the height of the image smaller than the height of the container, grow the image until the height of the container of the image. " That’s the idea

[laura_billiau]

Ooooouh yeah, that’s working very well. I will work on a script who can do that, in the near future, for the older browsers.

In all case, thank you