How to make an image fit the carousel? [duplicate]

-1

This question already has an answer here:

• 
  How to create a responsive image that also scales up in Bootstrap 3
  
  9 answers
  
  

I have a carousel with fixed size (for example, width=800px, height=450px). But I my images have different aspect ratio (16 : 9, 16:10, 1:1, etc) and the size, bigger than the size of my carousel. I am trying to make all the images reduce their size to fit my carousel.

Code of the carousel is:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

                <div class="carousel-inner">

                    <div class="carousel-item active">

                        <img class="carousel-img" src="{{ last_post.image.url }}"

                             alt="First slide">

                    </div>

                    <div class="carousel-item">

                        <img class="carousel-img"

                             src="{{ second_last_post.image.url }}" alt="Second slide">

                    </div>

                    <div class="carousel-item">

                        <img class="carousel-img" src="{{ third_last_post.image.url }}"

                             alt="Third slide">

                    </div>

                </div>

                <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">

                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>

                    <span class="sr-only">Previous</span>

                </a>

                <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">

                    <span class="carousel-control-next-icon" aria-hidden="true"></span>

                    <span class="sr-only">Next</span>

                </a>

            </div>

CSS:

.carousel-inner {

    height: 450px;

    width: 800px;

}

How can I resize images to fit the carousel?

css bootstrap-4

share|improve this question

asked Nov 19 '18 at 19:22

Alex KondrashovAlex Kondrashov

165

marked as duplicate by Community♦ Nov 19 '18 at 19:39

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Don't use a fixed size. There are many other questions on this: stackoverflow.com/questions/40152487/…, stackoverflow.com/questions/33685259/…, stackoverflow.com/questions/17290701/…
  – Zim
  Nov 19 '18 at 19:23
  
  
  

  
  
  
  

add a comment | 

-1

This question already has an answer here:

• 
  How to create a responsive image that also scales up in Bootstrap 3
  
  9 answers
  
  

I have a carousel with fixed size (for example, width=800px, height=450px). But I my images have different aspect ratio (16 : 9, 16:10, 1:1, etc) and the size, bigger than the size of my carousel. I am trying to make all the images reduce their size to fit my carousel.

Code of the carousel is:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

                <div class="carousel-inner">

                    <div class="carousel-item active">

                        <img class="carousel-img" src="{{ last_post.image.url }}"

                             alt="First slide">

                    </div>

                    <div class="carousel-item">

                        <img class="carousel-img"

                             src="{{ second_last_post.image.url }}" alt="Second slide">

                    </div>

                    <div class="carousel-item">

                        <img class="carousel-img" src="{{ third_last_post.image.url }}"

                             alt="Third slide">

                    </div>

                </div>

                <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">

                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>

                    <span class="sr-only">Previous</span>

                </a>

                <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">

                    <span class="carousel-control-next-icon" aria-hidden="true"></span>

                    <span class="sr-only">Next</span>

                </a>

            </div>

CSS:

.carousel-inner {

    height: 450px;

    width: 800px;

}

How can I resize images to fit the carousel?

css bootstrap-4

share|improve this question

asked Nov 19 '18 at 19:22

Alex KondrashovAlex Kondrashov

165

marked as duplicate by Community♦ Nov 19 '18 at 19:39

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Don't use a fixed size. There are many other questions on this: stackoverflow.com/questions/40152487/…, stackoverflow.com/questions/33685259/…, stackoverflow.com/questions/17290701/…
  – Zim
  Nov 19 '18 at 19:23
  
  
  

  
  
  
  

add a comment | 

-1

-1

-1

This question already has an answer here:

• 
  How to create a responsive image that also scales up in Bootstrap 3
  
  9 answers
  
  

I have a carousel with fixed size (for example, width=800px, height=450px). But I my images have different aspect ratio (16 : 9, 16:10, 1:1, etc) and the size, bigger than the size of my carousel. I am trying to make all the images reduce their size to fit my carousel.

Code of the carousel is:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

                <div class="carousel-inner">

                    <div class="carousel-item active">

                        <img class="carousel-img" src="{{ last_post.image.url }}"

                             alt="First slide">

                    </div>

                    <div class="carousel-item">

                        <img class="carousel-img"

                             src="{{ second_last_post.image.url }}" alt="Second slide">

                    </div>

                    <div class="carousel-item">

                        <img class="carousel-img" src="{{ third_last_post.image.url }}"

                             alt="Third slide">

                    </div>

                </div>

                <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">

                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>

                    <span class="sr-only">Previous</span>

                </a>

                <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">

                    <span class="carousel-control-next-icon" aria-hidden="true"></span>

                    <span class="sr-only">Next</span>

                </a>

            </div>

CSS:

.carousel-inner {

    height: 450px;

    width: 800px;

}

How can I resize images to fit the carousel?

css bootstrap-4

share|improve this question

asked Nov 19 '18 at 19:22

Alex KondrashovAlex Kondrashov

165

This question already has an answer here:

• 
  How to create a responsive image that also scales up in Bootstrap 3
  
  9 answers
  
  

I have a carousel with fixed size (for example, width=800px, height=450px). But I my images have different aspect ratio (16 : 9, 16:10, 1:1, etc) and the size, bigger than the size of my carousel. I am trying to make all the images reduce their size to fit my carousel.

Code of the carousel is:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

                <div class="carousel-inner">

                    <div class="carousel-item active">

                        <img class="carousel-img" src="{{ last_post.image.url }}"

                             alt="First slide">

                    </div>

                    <div class="carousel-item">

                        <img class="carousel-img"

                             src="{{ second_last_post.image.url }}" alt="Second slide">

                    </div>

                    <div class="carousel-item">

                        <img class="carousel-img" src="{{ third_last_post.image.url }}"

                             alt="Third slide">

                    </div>

                </div>

                <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">

                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>

                    <span class="sr-only">Previous</span>

                </a>

                <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">

                    <span class="carousel-control-next-icon" aria-hidden="true"></span>

                    <span class="sr-only">Next</span>

                </a>

            </div>

CSS:

.carousel-inner {

    height: 450px;

    width: 800px;

}

How can I resize images to fit the carousel?

This question already has an answer here:

• 
  How to create a responsive image that also scales up in Bootstrap 3
  
  9 answers
  
  

css bootstrap-4

css bootstrap-4

share|improve this question

asked Nov 19 '18 at 19:22

Alex KondrashovAlex Kondrashov

165

share|improve this question

asked Nov 19 '18 at 19:22

Alex KondrashovAlex Kondrashov

165

share|improve this question

share|improve this question

asked Nov 19 '18 at 19:22

Alex KondrashovAlex Kondrashov

165

asked Nov 19 '18 at 19:22

Alex KondrashovAlex Kondrashov

165

asked Nov 19 '18 at 19:22

Alex KondrashovAlex Kondrashov

165

165

marked as duplicate by Community♦ Nov 19 '18 at 19:39

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

marked as duplicate by Community♦ Nov 19 '18 at 19:39

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Don't use a fixed size. There are many other questions on this: stackoverflow.com/questions/40152487/…, stackoverflow.com/questions/33685259/…, stackoverflow.com/questions/17290701/…
  – Zim
  Nov 19 '18 at 19:23
  
  
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Don't use a fixed size. There are many other questions on this: stackoverflow.com/questions/40152487/…, stackoverflow.com/questions/33685259/…, stackoverflow.com/questions/17290701/…
  – Zim
  Nov 19 '18 at 19:23
  
  
  

  
  
  
  

Don't use a fixed size. There are many other questions on this: stackoverflow.com/questions/40152487/…, stackoverflow.com/questions/33685259/…, stackoverflow.com/questions/17290701/…
– Zim
Nov 19 '18 at 19:23

Don't use a fixed size. There are many other questions on this: stackoverflow.com/questions/40152487/…, stackoverflow.com/questions/33685259/…, stackoverflow.com/questions/17290701/…
– Zim
Nov 19 '18 at 19:23

add a comment | 

1 Answer
1

active

oldest

votes

0

The following works for me. It will cover the entire div with your photo but this means that the photo will be zoomed-in as much as it needs to be to do that. So it must hide some (maybe critical) parts from the photo.

.carousel-img

{

    width: 100%;

    height: 100%;

    object-fit: cover;

}

Otherwise if you can use object-fit: contain; instead, to always display the entire photo into your measures.

share|improve this answer

answered Nov 19 '18 at 19:37

Alexandros BantzosAlexandros Bantzos

428

add a comment | 

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

active

oldest

votes

active

oldest

votes

0

The following works for me. It will cover the entire div with your photo but this means that the photo will be zoomed-in as much as it needs to be to do that. So it must hide some (maybe critical) parts from the photo.

.carousel-img

{

    width: 100%;

    height: 100%;

    object-fit: cover;

}

Otherwise if you can use object-fit: contain; instead, to always display the entire photo into your measures.

share|improve this answer

answered Nov 19 '18 at 19:37

Alexandros BantzosAlexandros Bantzos

428

add a comment | 

0

The following works for me. It will cover the entire div with your photo but this means that the photo will be zoomed-in as much as it needs to be to do that. So it must hide some (maybe critical) parts from the photo.

.carousel-img

{

    width: 100%;

    height: 100%;

    object-fit: cover;

}

Otherwise if you can use object-fit: contain; instead, to always display the entire photo into your measures.

share|improve this answer

answered Nov 19 '18 at 19:37

Alexandros BantzosAlexandros Bantzos

428

add a comment | 

0

0

0

The following works for me. It will cover the entire div with your photo but this means that the photo will be zoomed-in as much as it needs to be to do that. So it must hide some (maybe critical) parts from the photo.

.carousel-img

{

    width: 100%;

    height: 100%;

    object-fit: cover;

}

Otherwise if you can use object-fit: contain; instead, to always display the entire photo into your measures.

share|improve this answer

answered Nov 19 '18 at 19:37

Alexandros BantzosAlexandros Bantzos

428

The following works for me. It will cover the entire div with your photo but this means that the photo will be zoomed-in as much as it needs to be to do that. So it must hide some (maybe critical) parts from the photo.

.carousel-img

{

    width: 100%;

    height: 100%;

    object-fit: cover;

}

Otherwise if you can use object-fit: contain; instead, to always display the entire photo into your measures.

share|improve this answer

answered Nov 19 '18 at 19:37

Alexandros BantzosAlexandros Bantzos

428

share|improve this answer

share|improve this answer

answered Nov 19 '18 at 19:37

Alexandros BantzosAlexandros Bantzos

428

answered Nov 19 '18 at 19:37

Alexandros BantzosAlexandros Bantzos

428

answered Nov 19 '18 at 19:37

Alexandros BantzosAlexandros Bantzos

428

428

add a comment | 

add a comment | 

This page is only for reference, If you need detailed information, please check here