Предотвращение увеличения размера слайд-шоу изображений больше, чем ячейка контейнера

ProgramBox

Предотвращение увеличения размера слайд-шоу изображений больше, чем ячейка контейнера

Post author:admin
Запись опубликована:10 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я создаю небольшую программу на html-jquery, которая динамически генерирует таблицу, в которой в каждой ячейке есть слайд-шоу. В слайд-шоу отображаются изображения, которые вы выбираете из папки на вашем компьютере.

Проблема в том, что когда я выбираю папку, слайд-шоу приобретает высоту 100vh для каждой ячейки со слайд-шоу. Я не могу понять, как предотвратить увеличение размера слайд-шоу больше, чем содержащая ячейка.

HTML

 <body style="height:100vh;">
    <div class="row">
      <div class="container-fluid">
        Rows: <input id="sRows" type="number" name="" value="2">
        Columns: <input id="sCol" type="number" name="" value="2">
        <button id="btnGen" type="button" name="button">Generate!</button>
      </div>
    </div>
    <div  id="slideshowContiner" class="w3-table-all" >
    </div>
</body>

CSS

   #slideshowContiner {
        table-layout: fixed;
        height: 100%;
      }
      .slider{
        max-width:100%;
        max-height: 100%;
      }
      .mySlide{
        width:100%;
        height:auto;
      }

Для кода Javascript, возможно, слишком длинный для чтения, наконец, созданная структура, внутри #slideshowContiner есть что-то вроде этого:

 <div id="slideshowContiner" class="w3-table-all">
  <tr></tr>
  <td style="background-color:#6a833c">
    <input webkitdirectory="" mozdirectory="" msdirectory="" odirectory="" directory="" multiple="" type="file" name="file">
    <div class="w3-content w3-section slider" style="">
      <img class="mySlide" style="display: none;" src="blob:null/">
      <img class="mySlide" style="display: none;" src="blob:null/">
      <img class="mySlide" style="display: none;" src="blob:null/">
    </div>
    </td>
  </div>

Jquery (TL: DR;)

 $( document ).ready(function() {
      var randomColor = function (){
          return '#'  ('000000'   Math.floor(Math.random()*16777215).toString(16)).slice(-6);
      }

      var sliders = []
      var myIndex = 0;

      function carousel() {
        var i;
        var slides = elem.children( ".mySlide" ).css("display", "none")
        console.log(slides, this);
      }
      function createSlider(files){
        var slider = $('<div class="w3-content w3-section slider" style=""></div>')
        for (var i = 0; i < files.length; i  ) {
          prev = $('<img class="mySlide" style="">').attr("src", URL.createObjectURL(files[i]))
          slider.append(prev)
        }
        sliders.push(slider)
        // slider.data("id", inn  )
        var myIndex = 0;
        slider.data("slideshow", function(){
          console.log(myIndex);
          var slides = slider.children( ".mySlide" ).css("display", "none")
          myIndex  ;
          if (myIndex > slides.length) {myIndex = 1}
          console.log(slides[myIndex]);
          $(slides[myIndex-1]).css("display", "block")
          setTimeout(slider.data("slideshow"), 2000)

        })
        return slider
      }

      var sContainer = $("#slideshowContiner")
      var sRows = $("#sRows")
      var sCol = $("#sCol")
      var btnGen = $("#btnGen")

      function genGrid(){
        sContainer.html("")
        for (var i = 0; i < sRows.val(); i  ) {
          var newRow = sContainer.append('<tr></tr>')
          // var newRow = sContainer.append('<div class="row flex-fill d-flex " style="border: 1px solid;"></div>')
          for (var x = 0; x < sCol.val(); x  ) {
            var newCol = $('<td style="background-color:' randomColor() '"></td>')
            newRow.append(newCol);
            var input = $('<input webkitdirectory mozdirectory msdirectory odirectory directory multiple/>')
                .attr('type', "file")
                .attr('name', "file")
                .on("change", function() {
                  cell = $(this).data("cell")
                  var s = createSlider(this.files)
                  cell.append(s)
                  // carousel(s)
                  var init = s.data("slideshow")();

                })
                .data("cell", newCol);;
            newCol.append($(input))
          }
        }
      }
      genGrid()
      btnGen.click(genGrid)

JsFiddle.

Примечание: в этом скрипте style="height:100vh;" находятся в корневом div, в исходном коде — в теге body.

Ответ №1:

Вы могли бы установить для каждого изображения фиксированную высоту, используя статическую единицу измерения, такую px как в вашем классе, и использовать несколько мультимедийных запросов для управления их размерами в разных разрешениях. Таким образом, вы можете ожидать, как они будут выглядеть.

1. Я никогда раньше этого не делал, не могли бы вы привести какой-нибудь пример / руководство?

2. .mySlide{ width:100%; height: 128px; } вместо auto я ставлю 128px . Попробуйте изменить это в своем коде.

3. Но, как вы видите в jsfiddle, ячейка генерируется автоматически, в зависимости от того, сколько строк ячеек выбирает пользователь. Как я могу установить высоту на основе этого и на экране пользователя?