Mixing
How to make an image fit the carousel? [duplicate]
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
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.
add a comment |
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
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 |
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
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
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
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
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.
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
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.
answered Nov 19 '18 at 19:37
Alexandros BantzosAlexandros Bantzos
428
add a comment |
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.
answered Nov 19 '18 at 19:37
Alexandros BantzosAlexandros Bantzos
428
add a comment |
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.
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.
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
answered Nov 19 '18 at 19:37
Alexandros BantzosAlexandros Bantzos
428
428
add a comment |
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