如何调整引导轮播以调整图像大小并使图像可链接？

Posted 2023-03-06

技术标签:

【中文标题】如何调整引导轮播以调整图像大小并使图像可链接？【英文标题】：How do I adjust bootstrap carousel to resize images and make images linkable? 【发布时间】：2019-04-18 00:52:49 【问题描述】：

我正在尝试建立我的网站，到目前为止，我在这个网站上找到了一些对我有帮助的答案，但我一直遇到一些障碍。

目前，我正在制作引导带轮播，并找到了让轮播使用以下答案调整图像高度的方法：

https://***.com/a/42461191/10654813

<head>
<style>.carousel-inner > .item > img  width:100%; height:570px;  </style>
</head>

我现在遇到的问题是，不同宽度的图像被拉伸了。我需要什么代码才能尊重图像的宽度？

这是我正在使用的代码：

  <!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>

【问题讨论】：

【参考方案1】：

将width: 100% 更改为max-width: 100% 应该可以解决问题。

.carousel-inner > .item > img 
    max-width: 100%;
    height: 570px;

【讨论】：

非常感谢。这解决了拉伸问题。有没有办法让宽度较小的图像保持居中？是的，在上面的声明块中添加margin: 0 auto;。

以上是关于如何调整引导轮播以调整图像大小并使图像可链接？的主要内容，如果未能解决你的问题，请参考以下文章