Resize slider with different sized images

Resize slider with different sized images

I have a mobile first slider with 3 types of images: tall, horizontally long and square. I want the horizontally long image determine the size of slider and then scale and center other ones to fit it's size. Using width:100%; height:auto; in my CSS code so images will be loaded with same width(100%) and different heights. Then using JS I want to get height of the image which has max width/height ratio and use it as the height of all images. And in the end using width:auto; height:100%; for images so all of them will fit the height. Here is the code I used to achieve this:

I have a mobile first slider with 3 types of images: tall, horizontally long and square. I want the horizontally long image determine the size of slider and then scale and center other ones to fit it's size. Using width:100%; height:auto; in my CSS code so images will be loaded with same width(100%) and different heights. Then using JS I want to get height of the image which has max width/height ratio and use it as the height of all images. And in the end using width:auto; height:100%; for images so all of them will fit the height. Here is the code I used to achieve this:

every slide has the following HTML:

<div class="img">
      <img src="" alt="">
 </div>

CSS code:

 .img{
     position: relative;
     vertical-align: middle;
}

.img img{ width:100%; height:auto; position: absolute; top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto; }

JS code:

        $(".img img").width = "100%";
        $(".img img").height = "auto";;
        var img_h , Imgs_heights=[] , ratio=[];
        slider.item.find(".img img").each(function(){
            Imgs_heights.push($(this).height());
            ratio.push($(this).width()/(($(this).height())));
        });
        img_h = Math.max.apply(Math,ratio);
        var i = r.indexOf(img_h );
        $(".img").height(Imgs_heights[i]);
        $(".img img").css("height", "100%");
        $(".img img").css("width", "auto");

Everything works just fine but I have problem when I resize the window. In resizing the height of images does not change and keeps the height calculated before. And I need to refresh page to see the result I want. How can I get the height to change? I added the two first lines in JS to force it take width:100%; height:auto; again in resized window but it does not work.

I will appreciate any help.

javascript css jquery image

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How to Check Password Strength with JavaScript, CSS and jQuery

Password is most important way to secure your data.If password is weak in not so strong anybody can access your data it is very important to create a secure password wherever you need. In this post, we will create a Password Strength Checker using JavaScript,jQuery and CSS.

How To Create An Image Gallery In HTML, CSS & JavaScript

A lightbox gallery is basically used to view the gallery images in detail specifically. You can code the JavaScript to do so but also we can use some downloaded JS and CSS. In this article, we will download the lightbox and attach the JS and CSS files into our code. For our own design satisfaction, we can also use the CSS code as we want. We will divide the task into three sections. In the first section, we will create the structure in the second section we sill add som CSS for our own purpose. In the last section, we will link the downloaded JS snd CSS files. How To Create An Image Gallery In HTML, CSS & Javascript.

How to Build An Image Gallery In HTML CSS & JavaScript

A lightbox gallery is basically used to view the gallery images in detail specifically. You can code the JavaScript to do so but also we can use some downloaded JS and CSS. In this article, we will download the lightbox and attach the JS and CSS files into our code. For our own design satisfaction, we can also use the CSS code as we want. We will divide the task into three sections. In the first section, we will create the structure in the second section we sill add som CSS for our own purpose. In the last section, we will link the downloaded JS snd CSS files. How to Build An Image Gallery In HTML CSS & Javascript Tutorial.

Product Image Slider | HTML/CSS/JavaScript

Product Image Slider | HTML/CSS/JavaScript. Building our own product image slider using HTML/CSS & JavaScript.

Image Slider Toggle Button with HTML CSS & Javascript

In this video you'll learn how to create an Image Slider Toggle Buttons or slider control in HTML CSS & JavaScript. Earlier I have shared a Responsive CSS Profile Cards using HTML & CSS. Now it's time to create an image slider buttons using JavaScript that slides images forward and backward.