Adjusting the Size of Slideshow Pictures in a JavaScript Array to Match the Viewport

Welcome to my first post! Please excuse any formatting issues.

I am currently working on a project where I am trying to create a slideshow using Javascript. I have successfully added images into an array and have the slideshow up and running.

However, I am facing an issue where the images are larger than the viewport. I have read through various posts like this one and this, but they do not address resizing images in arrays or require adding images to HTML, which is not what I want to do. I have tried using CSS, but it did not work as expected, and the lines of code I added in Javascript only adjusted the visible portion of the image, not the image itself. Is there a solution for what I am trying to achieve, and if so, where should I implement it to get the desired results?

Thank you for your assistance!

HTML

<div id="libImage"></div>

Javascript

var images = ["../images/lib-orange.jpg", "../images/lib-main.jpg", "../images/lib-powel.jpg", "../images/lib-ostrander.jpg"];

$(function () {
    var i = 0;
    $("#libImage").css("background", "url(images/" + images[i] + ")");
     setInterval(function () {
        i++;
        if (i == images.length) {
            i = 0;
        }
        $("#libImage").fadeOut("slow", function () {
            $(this).css("background", "url(images/" + images[i] + ")");
            $(this).fadeIn("slow");
        });
    }, 3000);
});

Thank you for the reply, apologies for the delay. Although the effect was different from what I intended, the problem remains the same. The images are not scaling to fit the size of the viewport.

https://jsfiddle.net/e6ywm5j2/5/

Answer №1

Instead of using background: url(), I opted for the img tag

<div id="libImage"><img src="" ></div>

Furthermore, I replaced

$("#libImage").css("background", "url(images/" + images[i] + ")");
with
$("#libImage img").prop("src", images[i]);

The necessary CSS changes are as follows:

div { width: 100%; height: 100vh; text-align: center; }

img {
  max-height: 90%;
  max-width: 90%;
}

Check out the demo here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the integration of Glide js within a Next js environment

I am trying to figure out how to use a script tag in the next JavaScript _app.js component for utilizing the Glide JavaScript carousel. However, I am facing difficulties in using the script tag. Can someone help me out by providing guidance on how to inc ...

Delete all pictures beginning with this specific ID from the posts

Currently, I have approximately 300 Wordpress posts, and each one contains a "tracking pixel" from a previously used service (which is implemented using IMG tags). This is an example of how it appears: <img id="serviceTrack_3274570" style="margin: 0px ...

Managing onChange in a ReactJs project

Currently, my React tsx page features input boxes like the following: <textarea value={this.state.myData!.valueOne} onChange={(e) => this.handleValueOneChange(e)}/> <textarea value={this.state.myData!.valueTwo} onChange={(e) => thi ...

Forming a fresh array incorporating every single element from the subarray

I am looking to create a new array that consolidates all the parameters from the subarrays into a single resulting array. Explaining this with an example below: var myArr=[ { "Id":1, "Name":'Ken ...

Is it possible to set a different default page index other than 0 in a material table using reactjs?

I have noticed that the default page index in the material table is set to '0', but the API I am currently using begins with a page index of '1'. Is there a way to adjust the default page index of the table to match that of the API? ...

Struggling to create a line break within an SVG using the <tspan> element?

I have a pair of text lines that are wrapped in <tspan> tags. <tspan dy="-11.7890625">welcome</tspan> <tspan dy="16.8" x="285.75">text</tspan> I am trying to add a line break between them, but the <br> tag is not worki ...

The criteria set by jQuery are met

I have developed my own custom form validation for two inputs: one for a phone number and the other for an email address. Additionally, I have integrated two forms on a single page. Here is a snippet of my code: var email, phone; if (email address passe ...

What is causing the issue of subdomains not functioning properly in express.js?

Currently, I am conducting some local experiments and have made changes to my hosts file. Here are the entries: 127.0.0.1 example.dev 127.0.0.1 www.example.dev 127.0.0.1 api.example.dev Below is the code I am using: var subdomain = req ...

extracting data from json using javascript

Here is the data in JSON format var testData = {text: '{"status":200}'}; I am attempting to extract the status using this code: console.log(testData.text.status); However, it returns undefined Could you please provide guidance on how to succ ...

"Unleashing the power of ng-options in AngularJS: a guide to dynamically retrieving the index

I am currently working with a select element, where I need both the selected value and dynamically generated index (I do not want to set the default index to [0]). How can this be achieved? <div class="input-label"> Select Mobile ...

Leveraging JavaScript functions within an HTML file on an Android device

Currently, I am facing an issue with loading and playing videos via streaming in my Android app using a JavaScript code inside an HTML file. My approach involves using a WebView to showcase the video content. However, the challenge lies in the fact that th ...

Arranging routes in node.js like a pro

const express = require('express'); const router = express.Router(); router.use(function(req, res, next){ console.log(req.user) if(!req.user){ res.redirect('/login'); }else{ res.locals.username = req.user.us ...

What is the best way to display div table data in the correct order on mobile devices using Bootstrap 3?

Currently, I am utilizing Bootstrap3 and have implemented the code below. While it displays correctly on my desktop, the issue arises when viewed on a mobile device as the text is not grouped properly. My desired mobile view should look like this: Heade ...

Reducing image file sizes in Ionic 3

I have been struggling to compress an image client-side using Ionic 3 for the past couple of days. I have experimented with: ng2-img-max - encountered an error when utilizing the blue-imp-canvas-to-blob canvas.toBlob() method (which is a dependency of ng2 ...

Converting canvas illustrations into HTML files

I am in the process of creating a drawing application that will be able to export into HTML/CSS/JavaScript. I plan to use this tutorial as a foundation for the drawing functionality. My goal is to take all the rectangles within the this.shapes = [] array a ...

Tips for passing a URL variable into an Ajax script to prefill a form input in a search field

I have a website with a search feature that dynamically queries a database as you type in the search field, similar to Google's search suggestions. This functionality is achieved through AJAX. As the results appear on the page while you enter your se ...

Dynamic background image that fills the entire webpage, adjusts to different screen sizes, and changes randomly

Currently, I am working on designing a web page with a dynamic background image that adjusts responsively in the browser without distortion. The challenge is to randomly select an image from an array using jQuery. Unfortunately, my knowledge of jQuery is ...

Is it necessary to always pause before I click?

Currently, I am in the process of writing tests for my website using WebdriverIO with Mocha and Chai. However, I encountered an issue where my element is not rendered before attempting to interact with it. it('select application', function(done) ...

Turn off the scrollbar without losing the ability to scroll

Struggling with disabling the HTML scrollbar while keeping the scrolling ability and preserving the scrollbar of a text area. Check out my code here I attempted to use this CSS: html {overflow:hidden;} Although it partially worked, I'm not complete ...

JavaScript: function that operates asynchronously

I am new to JavaScript and encountered some issues with async functions. I have a function that fetches data from MongoDB by creating a promise, but it returns a collection with an empty object. async function getRating(item, applicant) { let arr = await ...