Сохранение пропорций изображения в разделе

0

У меня есть деление с n-числом div, которые состоят из изображений разных размеров:

<div>
<div> <img ng-src="{{backgroundImage}}" />  </div>
<div> <img ng-src="{{backgroundImage}}" />  </div>
<div> <img ng-src="{{backgroundImage}}" />  </div>
<div> <img ng-src="{{backgroundImage}}" />  </div>
<div> <img ng-src="{{backgroundImage}}" />  </div>
<!-- dynamically the images will be loaded --> 
</div>

Функциональность, которую я ищу, это:

  • Они должны поступать в одну строку независимо от количества изображений, а это означает, что они должны изменяться до меньших изображений, если имеется большое количество изображений.

  • Соотношение сторон изображения должно сохраняться при повторной калибровке

  • Div должен быть одинаковой ширины и высоты при повторной калибровке

  • Мне бы хотелось, чтобы каждый образ выравнивался в пределах квадрата, который по размеру совпадает со всеми другими изображениями. Каждое изображение должно быть ограничено и изменено в пределах их собственного квадрата. Затем я хочу, чтобы все содержащиеся квадраты были отсортированы по строке. Так как число изображений увеличивается, размер квадратов уменьшается соответственно.

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

  • 0
    То, что вы хотите сказать, это то, что квадратное деление не пойдет на следующую строку, а как нет. из divs увеличивается, становится меньше в размерах?
  • 0
    да именно с изображениями в этом измененном размере div сохраняет соотношение сторон
Показать ещё 1 комментарий
Теги:

4 ответа

0
Лучший ответ

Вы можете попробовать что-то вроде этого, хотя для этого требуется дополнительный div:

* {
  margin: 0;
  padding: 0;
}
.outer-wrap-img {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.inner-wrap-img {
  display: table-cell;
}
.inner-wrap-img div {
  padding-bottom: 100%;
  position: relative;
}
.inner-wrap-img div img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
}
.red {
  background: #F00;
}
.green {
  background: #0f0;
}
<div class="outer-wrap-img">
  <div class="inner-wrap-img">
    <div class="red">
      <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="green">
      <img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="red">
      <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="green">
      <img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />
    </div>
  </div>
  <div class="inner-wrap-img">
    <div class="red">
      <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="green">
      <img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="red">
      <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="green">
      <img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />
    </div>
  </div>



</div>
Поделиться
  • 0
    это полезно, но один быстрый вопрос, я хочу, чтобы размер высоты оболочки был зафиксирован, когда для одного конкретного разрешения добавлено меньше или больше изображений
2

Я бы предпочел использовать чистые css и html, что-то вроде этого:

<div class="ratio-16-9">
    <img src="http://www.w3schools.com/html/pic_mountain.jpg" alt="Mountain View">
</div>

<style>
    .ratio-16-9,
    .ratio-12-9,
    .ratio-1-1 {
        display: block;
        position: relative;
        height: 0;
        overflow: hidden;
        padding-bottom: 56.25%;
    }

    .ratio-16-9 img,
    .ratio-12-9 img,
    .ratio-1-1 img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .ratio-1-1 {
        padding-bottom: 100%;
    }

    .ratio-12-9 {
        padding-bottom: 73.47%;
    }
</style>
Поделиться
  • 0
    спасибо за ответ, но мне нужно n-номер деления с изображениями во всех n-делениях в одном ряду
0

Используйте flexbox, или вы можете использовать таблицу.

Поделиться
0

Это должно соответствовать вашим требованиям. установить общее число. изображения к переменной imageCount, и код будет рассчитываться соответствующим образом. Прямо сейчас я дал задний фон. Вы можете установить URL-адрес изображения, когда используете

    var imageCount = 27;

    var width = window.innerWidth;
    var divWidth = width/imageCount;
    var html = "";
    for(var i=0;i<imageCount;i++)
    {
        html+= "<div style='float:left; width: "+divWidth +"px;height: "+divWidth +"px;background: red; background-size:100% 100%'></div>";
    }
    document.getElementById("images").innerHTML = html;
 *{
        padding: 0;
        margin: 0;
    }
<div id="images">

</div>
Поделиться
  • 0
    Спасибо за ответ, вы можете быть более конкретным, у меня есть 2 деления: 1 для оболочки, 2 для держателя изображения

Ещё вопросы

Сообщество Overcoder
Наверх
Меню