0

It is a standard Bootstrap carousel and I want to change the size of the img so that it fits the div size. Whenever the window size is changed the div becomes larger than the image and that just doesn't seem responsive and comes off untidy. here's my html code for one of the slides in carousel 

 <!--wrapper for slides -->
 <!--Item one -->
<div class="carousel-inner" role="listbox">
    <div class="item active">
        <img src="../Images/bloodDonation.jpg" alt="Blood Donation" />
        <div class="carousel-caption">
            <h1>Donate Blood </h1>
        </div>
    </div>

This is what the div looks like when window is resized

My idea was to get current div size through jquery and pass it on to the img tag so that it;s forever responsive but haven't got around to the technique so please help. Thanks.

Derp
  • 41
  • 5

1 Answers1

0

Try giving your img a height of 100vh, I guess that will solve the problem.

Aakash Thakur
  • 3,837
  • 10
  • 33
  • 64
  • It does solve the height problem, yes but it ruins the aspect ratio of the image. Only a part of the image is visible. Any idea how can i manipulate the width? – Derp May 04 '17 at 15:25
  • this might help:http://stackoverflow.com/questions/14119577/how-to-make-the-image-scale-to-full-height-in-bootstrap-carousel – Aakash Thakur May 04 '17 at 17:57