How do I adjust bootstrap carousel to resize images and make images linkable?
0
I'm trying to build my website, and so far have found some answers in this site that have helped me out, but I keep running into some roadblocks.
Currently, I'm making a boot strap carousel and found ways to have the carousel resize the image height using this answer:
https://stackoverflow.com/a/42461191/10654813
<head>
<style>.carousel-inner > .item > img width:100%; height:570px; </style>
</head>
The problem I'm having now, is that images with different widths are stretched out. What code do I need so the width of the images is respected?
Here's the code I'm using:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>.carousel-inner>.item > img width:100%; height:100%; </style>
</head>
<body>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://drive.google.com/uc?export=view&id=1_60hiP6f26VTAhBtoXmVV1ogtQZW_l4q">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1NNF4sPI3Z0rieJ4moFnpWM9w-c4TUnIt">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=14Vn0Qa3jKJ9e0GvOxRlHFAoMJ2ElACbE">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1nIwPiI5pO3lpXaEzddXRdhYMIOznYwBI">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1nVy7T-10TrpYgdFbSZz356SpT9JJWvWS">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1s2CnnBlNDBzR2XuF53wQqt3lMQXS5z8a">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=19uPB4nECcIySfAQ48WwaLtm1jkxMzzQM">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=18eQZcE7U1Sz4xgXJ_jE2uUnudWI6W79O">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=17qqNdGtcLdqnWwl_TAkzZIw-kagBd250">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=15KMQit_RIiHfyLocGO6jwhnmf_lrUPne">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1A3LocibiAvtRj931vPZowZ5hOqmZ9bXu">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1vJrKy2x7Jj2nY5TzuNfw1VPQn7hJXeoM">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1wU2iv5IxUhHallwdzOHXqbwn6ufT-rNx">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1zbCjc0Y1uCiMNLwm-7k7U-q9lMYWoeR6">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1OQ7UnEvXl1pZww9hOJE1LZy-K9x28VY9">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1VHLX_7fuu_i0-1zlsYNbJZxTI-RebH7X">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1gml2FIqIddrQGz8gaB8B_ziYb682ko_e">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1mrHn0jMeCuXUpQDafcm64fi03Vx7uucw">
</div>
</div>
</a>
</div>
</div>
</body>
</html>
carousel slideshow
asked Nov 15 '18 at 0:12
AlekimsiorAlekimsior
32
add a comment |
0
I'm trying to build my website, and so far have found some answers in this site that have helped me out, but I keep running into some roadblocks.
Currently, I'm making a boot strap carousel and found ways to have the carousel resize the image height using this answer:
https://stackoverflow.com/a/42461191/10654813
<head>
<style>.carousel-inner > .item > img width:100%; height:570px; </style>
</head>
The problem I'm having now, is that images with different widths are stretched out. What code do I need so the width of the images is respected?
Here's the code I'm using:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>.carousel-inner>.item > img width:100%; height:100%; </style>
</head>
<body>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://drive.google.com/uc?export=view&id=1_60hiP6f26VTAhBtoXmVV1ogtQZW_l4q">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1NNF4sPI3Z0rieJ4moFnpWM9w-c4TUnIt">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=14Vn0Qa3jKJ9e0GvOxRlHFAoMJ2ElACbE">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1nIwPiI5pO3lpXaEzddXRdhYMIOznYwBI">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1nVy7T-10TrpYgdFbSZz356SpT9JJWvWS">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1s2CnnBlNDBzR2XuF53wQqt3lMQXS5z8a">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=19uPB4nECcIySfAQ48WwaLtm1jkxMzzQM">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=18eQZcE7U1Sz4xgXJ_jE2uUnudWI6W79O">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=17qqNdGtcLdqnWwl_TAkzZIw-kagBd250">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=15KMQit_RIiHfyLocGO6jwhnmf_lrUPne">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1A3LocibiAvtRj931vPZowZ5hOqmZ9bXu">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1vJrKy2x7Jj2nY5TzuNfw1VPQn7hJXeoM">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1wU2iv5IxUhHallwdzOHXqbwn6ufT-rNx">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1zbCjc0Y1uCiMNLwm-7k7U-q9lMYWoeR6">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1OQ7UnEvXl1pZww9hOJE1LZy-K9x28VY9">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1VHLX_7fuu_i0-1zlsYNbJZxTI-RebH7X">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1gml2FIqIddrQGz8gaB8B_ziYb682ko_e">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1mrHn0jMeCuXUpQDafcm64fi03Vx7uucw">
</div>
</div>
</a>
</div>
</div>
</body>
</html>
carousel slideshow
asked Nov 15 '18 at 0:12
AlekimsiorAlekimsior
32
add a comment |
0
0
0
I'm trying to build my website, and so far have found some answers in this site that have helped me out, but I keep running into some roadblocks.
Currently, I'm making a boot strap carousel and found ways to have the carousel resize the image height using this answer:
https://stackoverflow.com/a/42461191/10654813
<head>
<style>.carousel-inner > .item > img width:100%; height:570px; </style>
</head>
The problem I'm having now, is that images with different widths are stretched out. What code do I need so the width of the images is respected?
Here's the code I'm using:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>.carousel-inner>.item > img width:100%; height:100%; </style>
</head>
<body>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://drive.google.com/uc?export=view&id=1_60hiP6f26VTAhBtoXmVV1ogtQZW_l4q">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1NNF4sPI3Z0rieJ4moFnpWM9w-c4TUnIt">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=14Vn0Qa3jKJ9e0GvOxRlHFAoMJ2ElACbE">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1nIwPiI5pO3lpXaEzddXRdhYMIOznYwBI">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1nVy7T-10TrpYgdFbSZz356SpT9JJWvWS">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1s2CnnBlNDBzR2XuF53wQqt3lMQXS5z8a">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=19uPB4nECcIySfAQ48WwaLtm1jkxMzzQM">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=18eQZcE7U1Sz4xgXJ_jE2uUnudWI6W79O">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=17qqNdGtcLdqnWwl_TAkzZIw-kagBd250">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=15KMQit_RIiHfyLocGO6jwhnmf_lrUPne">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1A3LocibiAvtRj931vPZowZ5hOqmZ9bXu">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1vJrKy2x7Jj2nY5TzuNfw1VPQn7hJXeoM">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1wU2iv5IxUhHallwdzOHXqbwn6ufT-rNx">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1zbCjc0Y1uCiMNLwm-7k7U-q9lMYWoeR6">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1OQ7UnEvXl1pZww9hOJE1LZy-K9x28VY9">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1VHLX_7fuu_i0-1zlsYNbJZxTI-RebH7X">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1gml2FIqIddrQGz8gaB8B_ziYb682ko_e">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1mrHn0jMeCuXUpQDafcm64fi03Vx7uucw">
</div>
</div>
</a>
</div>
</div>
</body>
</html>
carousel slideshow
asked Nov 15 '18 at 0:12
AlekimsiorAlekimsior
32
I'm trying to build my website, and so far have found some answers in this site that have helped me out, but I keep running into some roadblocks.
Currently, I'm making a boot strap carousel and found ways to have the carousel resize the image height using this answer:
https://stackoverflow.com/a/42461191/10654813
<head>
<style>.carousel-inner > .item > img width:100%; height:570px; </style>
</head>
The problem I'm having now, is that images with different widths are stretched out. What code do I need so the width of the images is respected?
Here's the code I'm using:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>.carousel-inner>.item > img width:100%; height:100%; </style>
</head>
<body>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://drive.google.com/uc?export=view&id=1_60hiP6f26VTAhBtoXmVV1ogtQZW_l4q">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1NNF4sPI3Z0rieJ4moFnpWM9w-c4TUnIt">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=14Vn0Qa3jKJ9e0GvOxRlHFAoMJ2ElACbE">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1nIwPiI5pO3lpXaEzddXRdhYMIOznYwBI">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1nVy7T-10TrpYgdFbSZz356SpT9JJWvWS">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1s2CnnBlNDBzR2XuF53wQqt3lMQXS5z8a">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=19uPB4nECcIySfAQ48WwaLtm1jkxMzzQM">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=18eQZcE7U1Sz4xgXJ_jE2uUnudWI6W79O">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=17qqNdGtcLdqnWwl_TAkzZIw-kagBd250">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=15KMQit_RIiHfyLocGO6jwhnmf_lrUPne">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1A3LocibiAvtRj931vPZowZ5hOqmZ9bXu">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1vJrKy2x7Jj2nY5TzuNfw1VPQn7hJXeoM">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1wU2iv5IxUhHallwdzOHXqbwn6ufT-rNx">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1zbCjc0Y1uCiMNLwm-7k7U-q9lMYWoeR6">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1OQ7UnEvXl1pZww9hOJE1LZy-K9x28VY9">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1VHLX_7fuu_i0-1zlsYNbJZxTI-RebH7X">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1gml2FIqIddrQGz8gaB8B_ziYb682ko_e">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1mrHn0jMeCuXUpQDafcm64fi03Vx7uucw">
</div>
</div>
</a>
</div>
</div>
</body>
</html>
carousel slideshow
carousel slideshow
asked Nov 15 '18 at 0:12
AlekimsiorAlekimsior
32
asked Nov 15 '18 at 0:12
AlekimsiorAlekimsior
32
asked Nov 15 '18 at 0:12
AlekimsiorAlekimsior
32
asked Nov 15 '18 at 0:12
AlekimsiorAlekimsior
32
asked Nov 15 '18 at 0:12
AlekimsiorAlekimsior
32
32
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
Changing width: 100% to max-width: 100% should do the trick.
.carousel-inner > .item > img
max-width: 100%;
height: 570px;
answered Nov 15 '18 at 0:52
LionelWLionelW
19216
Thanks a bunch. This solved the stretching issue. Is there a way to make images of less width to stay centered?
– Alekimsior
Nov 15 '18 at 1:07
Yes, addmargin: 0 auto;in the above declaration block.
– LionelW
Nov 15 '18 at 1:20
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%2f53310659%2fhow-do-i-adjust-bootstrap-carousel-to-resize-images-and-make-images-linkable%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Changing width: 100% to max-width: 100% should do the trick.
.carousel-inner > .item > img
max-width: 100%;
height: 570px;
answered Nov 15 '18 at 0:52
LionelWLionelW
19216
Thanks a bunch. This solved the stretching issue. Is there a way to make images of less width to stay centered?
– Alekimsior
Nov 15 '18 at 1:07
Yes, addmargin: 0 auto;in the above declaration block.
– LionelW
Nov 15 '18 at 1:20
add a comment |
0
Changing width: 100% to max-width: 100% should do the trick.
.carousel-inner > .item > img
max-width: 100%;
height: 570px;
answered Nov 15 '18 at 0:52
LionelWLionelW
19216
Thanks a bunch. This solved the stretching issue. Is there a way to make images of less width to stay centered?
– Alekimsior
Nov 15 '18 at 1:07
Yes, addmargin: 0 auto;in the above declaration block.
– LionelW
Nov 15 '18 at 1:20
add a comment |
0
0
0
Changing width: 100% to max-width: 100% should do the trick.
.carousel-inner > .item > img
max-width: 100%;
height: 570px;
answered Nov 15 '18 at 0:52
LionelWLionelW
19216
Changing width: 100% to max-width: 100% should do the trick.
.carousel-inner > .item > img
max-width: 100%;
height: 570px;
answered Nov 15 '18 at 0:52
LionelWLionelW
19216
answered Nov 15 '18 at 0:52
LionelWLionelW
19216
answered Nov 15 '18 at 0:52
LionelWLionelW
19216
answered Nov 15 '18 at 0:52
LionelWLionelW
19216
19216
Thanks a bunch. This solved the stretching issue. Is there a way to make images of less width to stay centered?
– Alekimsior
Nov 15 '18 at 1:07
Yes, addmargin: 0 auto;in the above declaration block.
– LionelW
Nov 15 '18 at 1:20
add a comment |
Thanks a bunch. This solved the stretching issue. Is there a way to make images of less width to stay centered?
– Alekimsior
Nov 15 '18 at 1:07
Yes, addmargin: 0 auto;in the above declaration block.
– LionelW
Nov 15 '18 at 1:20
Thanks a bunch. This solved the stretching issue. Is there a way to make images of less width to stay centered?
– Alekimsior
Nov 15 '18 at 1:07
Thanks a bunch. This solved the stretching issue. Is there a way to make images of less width to stay centered?
– Alekimsior
Nov 15 '18 at 1:07
Yes, add
margin: 0 auto; in the above declaration block.– LionelW
Nov 15 '18 at 1:20
Yes, add
margin: 0 auto; in the above declaration block.– LionelW
Nov 15 '18 at 1:20
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%2f53310659%2fhow-do-i-adjust-bootstrap-carousel-to-resize-images-and-make-images-linkable%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
