nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Child Item

Web development simple question

chocolate boy123

Hey can anyone tell me why my images wont change size when i change the height? Thanks for your help.

[HTML]
<div class="container">

<div id="myCarousel" class="carousel slide">

<ol class="carousel-indicators">
<li class="item1 active"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
</ol>


<div class="carousel-inner" role="listbox">

<div class="item active">
<img src="images/homeIMG1.jpg" width="100%" height="900px">
<div class="carousel-caption">
</div>
</div>

<div class="item">
<img src="images/homeIMG2.jpg" alt="Chania" width="100%" height="420px">
<div class="carousel-caption">
</div>
</div>

<div class="item">
<img src="images/homeIMG3.jpg" alt="Flower" width="100%" height="500">
<div class="carousel-caption">

</div>
</div>

<div class="item">
<img src="images/homeIMG4.jpg" alt="Flower" width="100%" height="400>
<div class="carousel-caption">

</div>
</div>

</div>

</div>
</div>

<script>
$(document).ready(function(){
// Activate Carousel
$("#myCarousel").carousel();

// Enable Carousel Indicators
$(".item1").click(function(){
$("#myCarousel").carousel(0);
});
$(".item2").click(function(){
$("#myCarousel").carousel(1);
});
$(".item3").click(function(){
$("#myCarousel").carousel(2);
});
$(".item4").click(function(){
$("#myCarousel").carousel(3);
});

// Enable Carousel Controls
$(".left").click(function(){
$("#myCarousel").carousel("prev");
});
$(".right").click(function(){
$("#myCarousel").carousel("next");
});
});
</script>
[/HTML]

Find more posts tagged with

Quick Links

Comments

yoyo

Does it work using inline css? i.e: style="min-height: 900px; height: 900px; max-height: 900px;"? also check the CSS for the item class, maybe height is set in there?

Nick

pillphil

<div class="item">
        <img src="images/homeIMG3.jpg" alt="Flower" width="100%" [B]height="500">[/B]<!-- no unit -->
        <div class="carousel-caption">
          
        </div>
      </div>

      <div class="item">
        <img src="images/homeIMG4.jpg" alt="Flower" width="100%" [B]height="400>[/B] <!-- missing closing quote and unit-->
        <div class="carousel-caption">

See inline comments

Hmm, maybe not. Works fine for me without them too.

chocolate boy123

Thank you I'll be sure to check !

pillphil

Looks like I was wrong

Fukuyama

Is this a direct copy paste of your html code?

The second two height attributes are missing 'px' sizing and closing double-quotes (") which would be causing havoc in your divs (interpreting the closing '>' ) as part of the attribute value etc.

If not:

Does it work if you leave out the width attribute?

tricky D

Firstly as Fukuyama says, fix/validate the code.

Secondly try not to use % for image dimension attributes. While it might work fine, it's very inelegant imho.

Thirdly, we can't be sure if there is some css or the like affecting dimensions without more of the page's code.

chocolate boy123

Just as an update I have it working thanks for the responses !