Mixing
Image is stretched when place into carousal
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
I am using a carousel where I put 5 images with different height and width but there are some issues with images, some images are stretched some images are the center of the carousel.
I want that all images fit inside the carousel.
Here is my code :
<div uib-carousel active="active" class="filter-carousel" interval="false" no-wrap="noWrapSlides" ng-if="vm.temp.length">
<div uib-slide ng-repeat="img in vm.temp" index="$index">
<img ng-src="{{img.src}}" height="650">
</div>
javascript angularjs carousel
asked Jan 3 at 7:21
SumitSumit
17
add a comment |
0
I am using a carousel where I put 5 images with different height and width but there are some issues with images, some images are stretched some images are the center of the carousel.
I want that all images fit inside the carousel.
Here is my code :
<div uib-carousel active="active" class="filter-carousel" interval="false" no-wrap="noWrapSlides" ng-if="vm.temp.length">
<div uib-slide ng-repeat="img in vm.temp" index="$index">
<img ng-src="{{img.src}}" height="650">
</div>
javascript angularjs carousel
asked Jan 3 at 7:21
SumitSumit
17
1
Please provide your code.
– dns_nx
Jan 3 at 7:22
@Sumit please post your code what you have tried yet?
– Sunil Gehlot
Jan 3 at 8:02
add a comment |
0
0
0
I am using a carousel where I put 5 images with different height and width but there are some issues with images, some images are stretched some images are the center of the carousel.
I want that all images fit inside the carousel.
Here is my code :
<div uib-carousel active="active" class="filter-carousel" interval="false" no-wrap="noWrapSlides" ng-if="vm.temp.length">
<div uib-slide ng-repeat="img in vm.temp" index="$index">
<img ng-src="{{img.src}}" height="650">
</div>
javascript angularjs carousel
asked Jan 3 at 7:21
SumitSumit
17
I am using a carousel where I put 5 images with different height and width but there are some issues with images, some images are stretched some images are the center of the carousel.
I want that all images fit inside the carousel.
Here is my code :
<div uib-carousel active="active" class="filter-carousel" interval="false" no-wrap="noWrapSlides" ng-if="vm.temp.length">
<div uib-slide ng-repeat="img in vm.temp" index="$index">
<img ng-src="{{img.src}}" height="650">
</div>
javascript angularjs carousel
javascript angularjs carousel
asked Jan 3 at 7:21
SumitSumit
17
asked Jan 3 at 7:21
SumitSumit
17
edited Jan 4 at 6:32
Sumit
asked Jan 3 at 7:21
SumitSumit
17
asked Jan 3 at 7:21
SumitSumit
17
asked Jan 3 at 7:21
SumitSumit
17
17
1
Please provide your code.
– dns_nx
Jan 3 at 7:22
@Sumit please post your code what you have tried yet?
– Sunil Gehlot
Jan 3 at 8:02
add a comment |
1
Please provide your code.
– dns_nx
Jan 3 at 7:22
@Sumit please post your code what you have tried yet?
– Sunil Gehlot
Jan 3 at 8:02
1
1
Please provide your code.
– dns_nx
Jan 3 at 7:22
Please provide your code.
– dns_nx
Jan 3 at 7:22
@Sumit please post your code what you have tried yet?
– Sunil Gehlot
Jan 3 at 8:02
@Sumit please post your code what you have tried yet?
– Sunil Gehlot
Jan 3 at 8:02
add a comment |
2 Answers
2
active
oldest
votes
0
You can use the "background-image" attribute of the div tag. And set the "background-size" attribute to contain or cover. Eg :
.owl-carousel .item img
{
display: none;
}
.owl-carousel .item img + div
{
display: block;
width: 100%;
height: 210px; /* option */
background-repeat: no-repeat;
background-position: center center; /* 0 0 */
background-size: contain; /* or cover */
}<div class="owl-carousel owl-theme">
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
</div>answered Jan 3 at 7:33
Joseph NguyenJoseph Nguyen
14
I used cover, but it will cut my images at some portion
– Sumit
Jan 3 at 7:45
As @clone : "You can use fill, contain, cover, none or scale down.". In my example, you can accept : "contain" or "cover". Otherwise, you might resize image before publishing!
– Joseph Nguyen
Jan 3 at 7:55
add a comment |
0
You can use the object-fit property in CSS to define how an image should fit into a container. You can use fill, contain, cover, none or scale down.
.the-carousel img {
object-fit: cover;
}
answered Jan 3 at 7:44
clonedcloned
64769
I used it but it is going to cut my images in some portion
– Sumit
Jan 3 at 7:46
How do I fix that
– Sumit
Jan 3 at 7:46
Since we don't know your HTML or CSS we can't help you with this. Please post a minimal working example where we can verify your problem.
– cloned
Jan 3 at 8:01
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54017955%2fimage-is-stretched-when-place-into-carousal%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You can use the "background-image" attribute of the div tag. And set the "background-size" attribute to contain or cover. Eg :
.owl-carousel .item img
{
display: none;
}
.owl-carousel .item img + div
{
display: block;
width: 100%;
height: 210px; /* option */
background-repeat: no-repeat;
background-position: center center; /* 0 0 */
background-size: contain; /* or cover */
}<div class="owl-carousel owl-theme">
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
</div>answered Jan 3 at 7:33
Joseph NguyenJoseph Nguyen
14
I used cover, but it will cut my images at some portion
– Sumit
Jan 3 at 7:45
As @clone : "You can use fill, contain, cover, none or scale down.". In my example, you can accept : "contain" or "cover". Otherwise, you might resize image before publishing!
– Joseph Nguyen
Jan 3 at 7:55
add a comment |
0
You can use the "background-image" attribute of the div tag. And set the "background-size" attribute to contain or cover. Eg :
.owl-carousel .item img
{
display: none;
}
.owl-carousel .item img + div
{
display: block;
width: 100%;
height: 210px; /* option */
background-repeat: no-repeat;
background-position: center center; /* 0 0 */
background-size: contain; /* or cover */
}<div class="owl-carousel owl-theme">
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
</div>answered Jan 3 at 7:33
Joseph NguyenJoseph Nguyen
14
I used cover, but it will cut my images at some portion
– Sumit
Jan 3 at 7:45
As @clone : "You can use fill, contain, cover, none or scale down.". In my example, you can accept : "contain" or "cover". Otherwise, you might resize image before publishing!
– Joseph Nguyen
Jan 3 at 7:55
add a comment |
0
0
0
You can use the "background-image" attribute of the div tag. And set the "background-size" attribute to contain or cover. Eg :
.owl-carousel .item img
{
display: none;
}
.owl-carousel .item img + div
{
display: block;
width: 100%;
height: 210px; /* option */
background-repeat: no-repeat;
background-position: center center; /* 0 0 */
background-size: contain; /* or cover */
}<div class="owl-carousel owl-theme">
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
</div>answered Jan 3 at 7:33
Joseph NguyenJoseph Nguyen
14
You can use the "background-image" attribute of the div tag. And set the "background-size" attribute to contain or cover. Eg :
.owl-carousel .item img
{
display: none;
}
.owl-carousel .item img + div
{
display: block;
width: 100%;
height: 210px; /* option */
background-repeat: no-repeat;
background-position: center center; /* 0 0 */
background-size: contain; /* or cover */
}<div class="owl-carousel owl-theme">
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
</div>.owl-carousel .item img
{
display: none;
}
.owl-carousel .item img + div
{
display: block;
width: 100%;
height: 210px; /* option */
background-repeat: no-repeat;
background-position: center center; /* 0 0 */
background-size: contain; /* or cover */
}<div class="owl-carousel owl-theme">
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
</div>.owl-carousel .item img
{
display: none;
}
.owl-carousel .item img + div
{
display: block;
width: 100%;
height: 210px; /* option */
background-repeat: no-repeat;
background-position: center center; /* 0 0 */
background-size: contain; /* or cover */
}<div class="owl-carousel owl-theme">
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
</div>answered Jan 3 at 7:33
Joseph NguyenJoseph Nguyen
14
answered Jan 3 at 7:33
Joseph NguyenJoseph Nguyen
14
answered Jan 3 at 7:33
Joseph NguyenJoseph Nguyen
14
answered Jan 3 at 7:33
Joseph NguyenJoseph Nguyen
14
14
I used cover, but it will cut my images at some portion
– Sumit
Jan 3 at 7:45
As @clone : "You can use fill, contain, cover, none or scale down.". In my example, you can accept : "contain" or "cover". Otherwise, you might resize image before publishing!
– Joseph Nguyen
Jan 3 at 7:55
add a comment |
I used cover, but it will cut my images at some portion
– Sumit
Jan 3 at 7:45
As @clone : "You can use fill, contain, cover, none or scale down.". In my example, you can accept : "contain" or "cover". Otherwise, you might resize image before publishing!
– Joseph Nguyen
Jan 3 at 7:55
I used cover, but it will cut my images at some portion
– Sumit
Jan 3 at 7:45
I used cover, but it will cut my images at some portion
– Sumit
Jan 3 at 7:45
As @clone : "You can use fill, contain, cover, none or scale down.". In my example, you can accept : "contain" or "cover". Otherwise, you might resize image before publishing!
– Joseph Nguyen
Jan 3 at 7:55
As @clone : "You can use fill, contain, cover, none or scale down.". In my example, you can accept : "contain" or "cover". Otherwise, you might resize image before publishing!
– Joseph Nguyen
Jan 3 at 7:55
add a comment |
0
You can use the object-fit property in CSS to define how an image should fit into a container. You can use fill, contain, cover, none or scale down.
.the-carousel img {
object-fit: cover;
}
answered Jan 3 at 7:44
clonedcloned
64769
I used it but it is going to cut my images in some portion
– Sumit
Jan 3 at 7:46
How do I fix that
– Sumit
Jan 3 at 7:46
Since we don't know your HTML or CSS we can't help you with this. Please post a minimal working example where we can verify your problem.
– cloned
Jan 3 at 8:01
add a comment |
0
You can use the object-fit property in CSS to define how an image should fit into a container. You can use fill, contain, cover, none or scale down.
.the-carousel img {
object-fit: cover;
}
answered Jan 3 at 7:44
clonedcloned
64769
I used it but it is going to cut my images in some portion
– Sumit
Jan 3 at 7:46
How do I fix that
– Sumit
Jan 3 at 7:46
Since we don't know your HTML or CSS we can't help you with this. Please post a minimal working example where we can verify your problem.
– cloned
Jan 3 at 8:01
add a comment |
0
0
0
You can use the object-fit property in CSS to define how an image should fit into a container. You can use fill, contain, cover, none or scale down.
.the-carousel img {
object-fit: cover;
}
answered Jan 3 at 7:44
clonedcloned
64769
You can use the object-fit property in CSS to define how an image should fit into a container. You can use fill, contain, cover, none or scale down.
.the-carousel img {
object-fit: cover;
}
answered Jan 3 at 7:44
clonedcloned
64769
answered Jan 3 at 7:44
clonedcloned
64769
answered Jan 3 at 7:44
clonedcloned
64769
answered Jan 3 at 7:44
clonedcloned
64769
64769
I used it but it is going to cut my images in some portion
– Sumit
Jan 3 at 7:46
How do I fix that
– Sumit
Jan 3 at 7:46
Since we don't know your HTML or CSS we can't help you with this. Please post a minimal working example where we can verify your problem.
– cloned
Jan 3 at 8:01
add a comment |
I used it but it is going to cut my images in some portion
– Sumit
Jan 3 at 7:46
How do I fix that
– Sumit
Jan 3 at 7:46
Since we don't know your HTML or CSS we can't help you with this. Please post a minimal working example where we can verify your problem.
– cloned
Jan 3 at 8:01
I used it but it is going to cut my images in some portion
– Sumit
Jan 3 at 7:46
I used it but it is going to cut my images in some portion
– Sumit
Jan 3 at 7:46
How do I fix that
– Sumit
Jan 3 at 7:46
How do I fix that
– Sumit
Jan 3 at 7:46
Since we don't know your HTML or CSS we can't help you with this. Please post a minimal working example where we can verify your problem.
– cloned
Jan 3 at 8:01
Since we don't know your HTML or CSS we can't help you with this. Please post a minimal working example where we can verify your problem.
– cloned
Jan 3 at 8:01
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54017955%2fimage-is-stretched-when-place-into-carousal%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Please provide your code.
– dns_nx
Jan 3 at 7:22
@Sumit please post your code what you have tried yet?
– Sunil Gehlot
Jan 3 at 8:02