Question

我正在尝试建立自己的网站，到目前为止，在该网站上已经找到了一些有助于我解决问题的答案，但我一直遇到一些障碍。

当前，我正在制作行李箱传送带，并找到了使用此答案来调整传送带尺寸图像高度的方法：

https://stackoverflow.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>

Answer 1

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

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

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

1 个答案: