What is the best way to adjust the size of an image within a div element using HTML?

I've created a Carousel with 5 images to display. However, I'm having an issue where only the image is showing up, and I want the text and button to appear below it. Here's how the nature image is currently displaying:

What I want is for the component to appear like this:

(function($) {
  var slide = function(ele, options) {
    var $ele = $(ele);

    var setting = {
      speed: 1000,
      interval: 4000,
    };

    $.extend(true, setting, options);

    var states = [{
        $zIndex: 1,
        width: 120,
        height: 150,
        top: 69,
        left: 134,
        $opacity: 0.2,
      },
      {
        $zIndex: 2,
        width: 130,
        height: 170,
        top: 59,
        left: 0,
        $opacity: 0.4
      },
      {
        $zIndex: 3,
        width: 170,
        height: 218,
        top: 35,
        left: 110,
        $opacity: 0.7,
      },
      {
        $zIndex: 4,
        width: 224,
        height: 288,
        top: 0,
        left: 263,
        $opacity: 1
      },
      {
        $zIndex: 3,
        width: 170,
        height: 218,
        top: 35,
        left: 470,
        $opacity: 0.7,
      },
      {
        $zIndex: 2,
        width: 130,
        height: 170,
        top: 59,
        left: 620,
        $opacity: 0.4,
      },
      {
        $zIndex: 1,
        width: 120,
        height: 150,
        top: 69,
        left: 500,
        $opacity: 0.2,
      },
    ];

    var $lis = $ele.find("li");
    var timer = null;

    $ele.find(".hi-next").on("click", function() {
      next();
    });
    $ele.find(".hi-prev").on("click", function() {
      states.push(states.shift());
      move();
    });
    $ele
      .on("mouseenter", function() {
        clearInterval(timer);
        timer = null;
      })
      .on("mouseleave", function() {
        autoPlay();
      });

    move();
    autoPlay();

    function move() {
      $lis.each(function(index, element) {
        var state = states[index];
        $(element)
          .css("zIndex", state.$zIndex)
          .finish()
          .animate(state, setting.speed)
          .find("img")
          .css("opacity", state.$opacity);
      });
    }

    function next() {
      states.unshift(states.pop());
      move();
    }

    function autoPlay() {
      timer = setInterval(next, setting.interval);
    }
  };

  $.fn.hiSlide = function(options) {
    $(this).each(function(index, ele) {
      slide(ele, options);
    });

    return this;
  };
})(jQuery);

 $(".slide").hiSlide();
body {
  font-family: "Roboto Condensed", sans-serif;
  overflow-x: hidden;
  background-color: rgba(0, 0, 0, 0.4);
}

body {
  background-image: url(ur.jpg);
}

h1 {
  margin: 150px auto 30px auto;
  text-align: center;
  color: #fff;
}

.hi-slide {
  position: relative;
  width: 754px;
  height: 292px;
  margin: 115px auto 0;
}

.hi-slide .hi-next,
.hi-slide .hi-prev {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border-radius: 50px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  background-color: #fff;
  color: black;
  transition: all 0.6s;
  font-size: 20px;
  font-weight: bold;
}

.hi-slide .hi-next:hover,
.hi-slide .hi-prev:hover {
  opacity: 1;
  background-color: #fff;
}

.hi-slide .hi-prev {
  left: -60px;
}

.hi-slide .hi-prev::before {
  content: "<";
}

.hi-slide .hi-next {
  right: -60px;
}

.hi-slide .hi-next::before {
  content: ">";
}

.hi-slide>ul {
  list-style: none;
  position: relative;
  width: 754px;
  height: 292px;
  margin: 0;
  padding: 0;
}

.hi-slide>ul>li {
  overflow: hidden;
  position: absolute;
  z-index: 0;
  left: 377px;
  top: 146px;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 3px solid #fff;
  background-color: #333;
  cursor: pointer;
}

.hi-slide>ul>li>img {
  width: 100%;
  height: 100%;
  background-position: center;
}
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="style.css" />

  <script src="https://cdn.jsdelivr.net/npm/jquery@1/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></script>
</head>

<body>
  <div class="slide hi-slide">
    <div class="hi-prev"></div>
    <div class="hi-next"></div>

    <ul>
      <li>
        <div class="card" style="width: 18rem">
          <img src="https://images.pexels.com/photos/12125084/pexels-photo-12125084.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="Img 1" />
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">
              Some quick example text to build on the card title and make up the bulk of the card's content.
            </p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </li>
      <li>
        <img src="https://images.pexels.com/photos/405240/pexels-photo-405240.jpeg?cs=srgb&dl=attractive-beautiful-curtain-405240.jpg&fm=jpg" alt="Img 2" />
      </li>
      <li>
        <img src="https://images.pexels.com/photos/1784982/pexels-photo-1784982.jpeg?cs=srgb&dl=attractive-beautiful-beauty-1784982.jpg&fm=jpg" alt="Img 3" />
      </li>
      <li>
        <img src="https://images.pexels.com/photos/219582/pexels-photo-219582.jpeg?cs=srgb&dl=attractive-beautiful-beauty-219582.jpg&fm=jpg" alt="Img 4" />
      </li>
      <li>
        <img src="https://images.pexels.com/photos/247124/pexels-photo-247124.jpeg?cs=srgb&dl=attractive-beautiful-beauty-247124.jpg&fm=jpg" alt="Img 5" />
      </li>
      <li>
        <img src="https://images.pexels.com/photos/1808777/pexels-photo-1808777.png?cs=srgb&dl=attractive-beautiful-beautiful-girl-1808777.jpg&fm=jpg" alt="Img 6" />
      </li>
      <li>
        <img src="https://images.pexels.com/photos/754448/pexels-photo-754448.jpeg?cs=srgb&dl=attractive-beautiful-beauty-754448.jpg&fm=jpg" alt="Img 7" />
      </li>
      <li>
        <img src="https://images.pexels.com/photos/761536/pexels-photo-761536.jpeg?cs=srgb&dl=attractive-beautiful-beauty-761536.jpg&fm=jpg" alt="Img 7" />
      </li>
      <li>
        <img src="https://images.pexels.com/photos/761536/pexels-photo-761536.jpeg?cs=srgb&dl=attractive-beautiful-beauty-761536.jpg&fm=jpg" alt="Img 7" />
      </li>
    </ul>
  </div>
  
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>  
</body>

javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

.hi-slide ul li img {
height:100px;
}

Adjust the image height based on the size of its containing div.

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 Canvas with Full Element Panning, Minimap Included

Currently, I am working on incorporating a mini map onto my canvas that mirrors what is displayed on the main canvas. The main canvas includes zoom and pan functions. I have created a rectangular shape for the minimap to display the content of the canvas. ...

javascriptcsshtmlcanvas

Tips on duplicating an object within a React state without using references

In my React application, I have a state that contains several objects. I need to make a copy of the c: "value" field from the initial state before it gets replaced by the input value from e.target.value. The purpose behind this is to ensure that ...

javascriptreactjs

Adjust images, documents, and videos to fit seamlessly within an iFrame

I am currently working on an MVC project with a View named Index.cshtml. Within this view, I have a dynamically created iFrame where the HTML content is generated in a string and then appended to a div using .html(). The content of the iFrame changes based ...

htmliframe

Is it necessary to upload a file in order to view a webpage? Could it be that my coding skills

Here's a simple concept: when you navigate to the same webpage, a different file should be uploaded based on whether you click on <a> elements labeled as tracks or sets. However, my code seems to be malfunctioning. Any ideas? Below is the HTML ...

jqueryhtmlajax

Tips for verifying login credentials with MongoDB and Express: Leveraging db.collection().findOne() or .find() functions

I am encountering an issue with a POST request involving user credentials being sent from a Login page to the API Server. The code looks like this: loginUser(creds) { //creds is in the form of { username: bob, password: 123 } var request = { ...

javascriptnode.jsmongodbexpressdatabase

Best Practice for Delivering JavaScript Files with Node.js Ajax?

In my current project, I am developing a node application that serves client-side JavaScript code to a static webpage. The goal is to have the code evaluated within the webpage, similar to the concept demonstrated in this example, but using Node.js instead ...

javascriptjquerynode.js

The component encounters a transformation in which prop values shift to undefined

My component seems to be encountering some instability. The value assigned to "this.state.list" from this.props is being immediately set to "undefined". I'm struggling to comprehend why this is happening. Can anyone spot the issue in the code? this.s ...

javascriptreactjsreact-native

Transmitting Various Static Files via Express Router

I am currently utilizing the Express router to serve static .html files based on the URL specified in router.get. For example, this code snippet sends the homepage: router.get('/', function(req, res, next) { res.sendFile('index.html&ap ...

javascriptnode.jsexpress

Transforming an AJAX call into a reusable function

My goal is to simplify my ajax calls by creating a function that can be reused. Although I'm unsure if I'm doing it correctly, I would like to attempt this approach. <script> $(document).ready(function(){ var reg_no=$("#reg_no").va ...

javascriptjqueryajax

Ensure the validation of multiple form fields in a single function

I've implemented code to validate a form field as you input values, changing the border color to red if invalid or green if valid: function FormValidation(){ var fn=document.getElementById("firstName").value; if(fn == ""){ document.ge ...

javascriptphphtmlforms

The organizational structure of data in MongoDB for posts, comments, saved content, and likes

I am currently diving into the world of MEANJS web development and working on structuring my data. As a newcomer to the NoSql concept, I am seeking guidance on the best practices to follow. The data I need to store includes: questions answers likes saved ...

javascriptmongodbnosql

Troubleshooting a setTimeout filter problem in Vue

Implementing a notification system in Vue has been my latest project. I've created a Notifications component to store error messages that I want to display. data(){ return { alerts: { error: [] } ...

javascriptvue.js

Unexpected behavior with CSS background-image transitions effects

Currently, I am experimenting with a hover swipe effect using div and background image. The background image utilizes the outer div's max-width and an inner div with a padding-bottom percentage to maintain the aspect ratio. However, there are several ...

csscross-browser

transferring data to Amazon Web Services using Angular framework

I'm currently facing an issue while trying to send a file to an AWS server using an Angular dropzone. I have my AWS credentials ready, but I am unsure of how to properly make the request. Every time I attempt to drop the file into the dropzone, I kee ...

javascriptangularjsdropzone.js

Determine if a JSON object is void

Using jQuery, I am checking whether the object returned from an AJAX call is empty or not. In the first example, the AJAX call is successful and returns some data. console.log("obj before JSON parse:", response); var test = $.isEmptyObject(response); con ...

javascriptjqueryobject

Tips for applying horizontal padding to the container-fluid class in Bootstrap 5

I'm struggling with the CSS code I wrote: .container-fluid{padding 3% 15%;} It's only adjusting the vertical padding to 3%, and there's no change in horizontal padding. #title { background-color: #ff4c68; } .container-fluid { pad ...

htmlcsstwitter-bootstrappaddingbootstrap-5

The overflow of CSS text selection color spills beyond the boundaries of the box

I'm just starting to learn CSS and was wondering if there is a way to prevent the text selection color from extending into the 'gutter' (I believe that's the correct term) like shown here: It may seem trivial, but I've observed th ...

css

npm package.json scripts not executing

Whenever I try to run npm start or npm run customScriptCommand, npm seems to not be executing anything on my project and just quickly returns a new line in the terminal. I attempted to solve this issue by uninstalling node and npm from my machine, then in ...

javascriptnode.jsnpmnpm-scripts

The AJAX functionality seems to have broken following the switch from php5 to php7

When I initially wrote my code in php5, the index page would make an ajax call to check if $_SESSION['user'] was stored. If a session existed, the user's information would be displayed; otherwise, the page would redirect to the login page. H ...

phphtmlarraysajaxsession

jQuery Load - Oops! There seems to be a syntax error: Unexpected token <

Error: Uncaught SyntaxError: Unexpected token < I encountered the error message mentioned above while trying to execute a jQuery load function: $('#footer').load(UrlOfFooterContent); The variable UrlOfFooterContent holds the URL of an MVC c ...

javascriptjqueryhtml