CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
user5292845
user5292845

Reputation:

How to get an image to fill a div?

I have an auto slideshow and I want to get all images to fill to the div horizontally and vertically. At the moment, they are all different sizes and they overflow outside of the div; they seem to ignore the sizes I've given them. When it's working I would like to place it on my website below a navigation bar and take up around half of the page. The h1 tag is also supposed to be under the images but it is underneath the images so not sure what's happening there. I've never tried anything like this before so any help is greatly appreciated! It's probably something simple I've missed somewhere.

I have attached a Codepen to show the problem: https://codepen.io/Macast/pen/JpKvOq

HTML:

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="pageContainer">
  <div id="slideshowContainer">
    <div class="fadein">
      <img src="https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg">
      <img src="https://wallpaperbrowse.com/media/images/6986083-waterfall-images_Mc3SaMS.jpg">
      <img src="https://wallpaperbrowse.com/media/images/road-dawn-mountains-sky.jpeg">
    </div>
  </div>
</div>

<h1>Testing</h1>

</html>

CSS: 

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

#pageContainer {
  width: 100%;
  height: auto;
}

#slideshowContainer {
  width: 100%;
}

.fadein {
  position: relative;
}

.fadein img {
  position: absolute;
  left: 0;
  top: 0;
}

JS:

$(function() {


$(".fadein img:gt(0)").hide();
  setInterval(function() {
    $(".fadein :first-child")
      .fadeOut()
      .next("img")
      .fadeIn()
      .end()
      .appendTo(".fadein");
  }, 3000);
});

Upvotes: 0

Views: 369

Answers (2)

codeth
codeth

Reputation: 567

Your CSS is giving .fadein img absolute positioning in a 100% width #slideshowContainer. You need to specify the container size and set to overflow: hidden;

Replace in your CSS:

#slideshowContainer {
  width: 800px;
  height: 400px;
  overflow: hidden;
}

.fadein img {
  width: 800px;
  height: auto;
}

Upvotes: 1

MTK
MTK

Reputation: 3570

That seem to resolve your issue:

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

And for the H1 text:

h1{
  position:relative;
  z-index:1;
}

Upvotes: 0

Related Questions