Как настроить загрузочную карусель, чтобы изменить размер изображений и сделать изображения связанными? - PullRequest
Новая
       19

Как настроить загрузочную карусель, чтобы изменить размер изображений и сделать изображения связанными?

0 голосов
/ 15 ноября 2018

Я пытаюсь создать свой сайт, и до сих пор нашел несколько ответов на этом сайте, которые помогли мне, но я продолжаю сталкиваться с некоторыми препятствиями.

В настоящее время я делаю карусель для загрузочного ремешка и нашел способ, чтобы карусель изменила высоту изображения, используя этот ответ:

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>

1 Ответ

0 голосов
/ 15 ноября 2018

Изменение width: 100% на max-width: 100% должно помочь. 

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