0

Помогите, пожалуйста, сделать высоту блока с картинками по содержимому.

.moduletable.personage div.boxplus-viewport {
  height: 493px !important;
}

.sigplus-gallery.sigplus-center {
  background: none repeat scroll 0 0 rgba(106, 32, 0, 0.12);
  border-radius: 3px 3px 3px 3px;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  margin: 15px auto;
}

.moduletable.personage div.boxplus-carousel,
.moduletable.personage div.boxplus-viewport,
.moduletable.personage div.boxplus-viewport ul {
  width: 100% !important;
}

div.sigplus-center > * {
  float: none !important;
  clear: both !important;
  margin: 0 auto !important;
  text-align: center !important;
}

div.sigplus-gallery * {
  box-sizing: content-box;
}

.boxplus-carousel .boxplus-viewport {
  margin: 0 !important;
  border: 0 none transparent !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
<div id="sigplus_a2a6ac1031da3ed8b3d94984fb7fec37" class="sigplus-gallery sigplus-center">
  <div class="boxplus-carousel" style="width: 730px;">
    <div class="boxplus-viewport" style="width: 730px; height: 493px;">
      <ul style="visibility: visible; width: 3094px; height: 249px; left: 0px; right: auto; top: 0px;">
        <li style="">
          <a href="/images/galleries/Alice/personage/alice-01.jpg" rel="boxplus-sigplus_a2a6ac1031da3ed8b3d94984fb7fec37"><img id="sigplus_a2a6ac1031da3ed8b3d94984fb7fec37_img0000" src="/cache/preview/f111a57c00a0e1f455af33ebd635f465.jpg" longdesc="/cache/preview/f111a57c00a0e1f455af33ebd635f465.jpg" alt="" width="178" height="240"></a>
        </li>

        <li style="">
          <a href="/images/galleries/Alice/personage/alice-02.jpg" rel="boxplus-sigplus_a2a6ac1031da3ed8b3d94984fb7fec37"><img id="sigplus_a2a6ac1031da3ed8b3d94984fb7fec37_img0001" src="/cache/preview/b13bf5e716424e725881939ca66eb380.jpg" longdesc="/cache/preview/b13bf5e716424e725881939ca66eb380.jpg" alt="" width="178" height="240"></a>
        </li>
        <li style="">
          <a href="/images/galleries/Alice/personage/alice-03.jpg" rel="boxplus-sigplus_a2a6ac1031da3ed8b3d94984fb7fec37"><img id="sigplus_a2a6ac1031da3ed8b3d94984fb7fec37_img0002" src="/cache/preview/7fffa943c3cbe2d755f222773a313f4a.jpg" longdesc="/cache/preview/7fffa943c3cbe2d755f222773a313f4a.jpg" alt="" width="178" height="240"></a>
        </li>
        <li style="">
          <a href="/images/galleries/Alice/personage/alice-04.jpg" rel="boxplus-sigplus_a2a6ac1031da3ed8b3d94984fb7fec37"><img id="sigplus_a2a6ac1031da3ed8b3d94984fb7fec37_img0003" src="/cache/preview/1d93e87e0bdf686567d6331b5e5f045b.jpg" longdesc="/cache/preview/1d93e87e0bdf686567d6331b5e5f045b.jpg" alt="" width="178" height="240"></a>
        </li>
        <li style="">
          <a href="/images/galleries/Alice/personage/alice-05.jpg" rel="boxplus-sigplus_a2a6ac1031da3ed8b3d94984fb7fec37"><img id="sigplus_a2a6ac1031da3ed8b3d94984fb7fec37_img0004" src="/cache/preview/8c8c366b4eda4af2c59d22d340dac605.jpg" longdesc="/cache/preview/8c8c366b4eda4af2c59d22d340dac605.jpg" alt="" width="178" height="240"></a>
        </li>
        <li style="">
          <a href="/images/galleries/Alice/personage/alice-06.jpg" rel="boxplus-sigplus_a2a6ac1031da3ed8b3d94984fb7fec37"><img id="sigplus_a2a6ac1031da3ed8b3d94984fb7fec37_img0005" src="/cache/preview/68bc8740d02c5138c562f3f21bc8870b.jpg" longdesc="/cache/preview/68bc8740d02c5138c562f3f21bc8870b.jpg" alt="" width="178" height="240"></a>
        </li>
        <li style="">
          <a href="/images/galleries/Alice/personage/alice-07.jpg" rel="boxplus-sigplus_a2a6ac1031da3ed8b3d94984fb7fec37"><img id="sigplus_a2a6ac1031da3ed8b3d94984fb7fec37_img0006" src="/cache/preview/250abb10758a2bdaf2197f43540d1ede.jpg" longdesc="/cache/preview/250abb10758a2bdaf2197f43540d1ede.jpg" alt="" width="178" height="240"></a>
        </li>
        <li style="">
          <a href="/images/galleries/Alice/personage/alice-08.jpg" rel="boxplus-sigplus_a2a6ac1031da3ed8b3d94984fb7fec37"><img id="sigplus_a2a6ac1031da3ed8b3d94984fb7fec37_img0007" src="/cache/preview/23a33d615767a7fe01e2bb4ae4a76adb.jpg" longdesc="/cache/preview/23a33d615767a7fe01e2bb4ae4a76adb.jpg" alt="" width="178" height="240"></a>
        </li>
        <li style="">
          <a href="/images/galleries/Alice/personage/alice-09.jpg" rel="boxplus-sigplus_a2a6ac1031da3ed8b3d94984fb7fec37"><img id="sigplus_a2a6ac1031da3ed8b3d94984fb7fec37_img0008" src="/cache/preview/1b9d48ca8f2851b493ca37201ff18aa7.jpg" longdesc="/cache/preview/1b9d48ca8f2851b493ca37201ff18aa7.jpg" alt="" width="178" height="240"></a>
        </li>
        <li style="">
          <a href="/images/galleries/Alice/personage/alice-10.jpg" rel="boxplus-sigplus_a2a6ac1031da3ed8b3d94984fb7fec37"><img id="sigplus_a2a6ac1031da3ed8b3d94984fb7fec37_img0009" src="/cache/preview/b35ecc3d3bb87eb01f755fdd6101ab55.jpg" longdesc="/cache/preview/b35ecc3d3bb87eb01f755fdd6101ab55.jpg" alt="" width="178" height="240"></a>
        </li>
        <li style="">
          <a href="/images/galleries/Alice/personage/alice-11.jpg" rel="boxplus-sigplus_a2a6ac1031da3ed8b3d94984fb7fec37"><img id="sigplus_a2a6ac1031da3ed8b3d94984fb7fec37_img0010" src="/cache/preview/19a588212e2ab5163f59c36ea665be7f.jpg" longdesc="/cache/preview/19a588212e2ab5163f59c36ea665be7f.jpg" alt="" width="178" height="240"></a>
        </li>
        <li style="">
          <a href="/images/galleries/Alice/personage/alice-12.jpg" rel="boxplus-sigplus_a2a6ac1031da3ed8b3d94984fb7fec37"><img id="sigplus_a2a6ac1031da3ed8b3d94984fb7fec37_img0011" src="/cache/preview/a89aa3deddd0abe4d96ad4b70c646868.jpg" longdesc="/cache/preview/a89aa3deddd0abe4d96ad4b70c646868.jpg" alt="" width="178" height="240"></a>
        </li>
        <li style="">
          <a href="/images/galleries/Alice/personage/alice-13.jpg" rel="boxplus-sigplus_a2a6ac1031da3ed8b3d94984fb7fec37"><img id="sigplus_a2a6ac1031da3ed8b3d94984fb7fec37_img0012" src="/cache/preview/241a5852e24b272b45052947504293d9.jpg" longdesc="/cache/preview/241a5852e24b272b45052947504293d9.jpg" alt="" width="178" height="240"></a>
        </li>
        <li style="">
          <a href="/images/galleries/Alice/personage/alice-14.jpg" rel="boxplus-sigplus_a2a6ac1031da3ed8b3d94984fb7fec37"><img id="sigplus_a2a6ac1031da3ed8b3d94984fb7fec37_img0013" src="/cache/preview/e193eec2c422132a110e14cef99f12a0.jpg" longdesc="/cache/preview/e193eec2c422132a110e14cef99f12a0.jpg" alt="" width="178" height="240"></a>
        </li>
        <li style="">
          <a href="/images/galleries/Alice/personage/alice-15.jpg" rel="boxplus-sigplus_a2a6ac1031da3ed8b3d94984fb7fec37"><img id="sigplus_a2a6ac1031da3ed8b3d94984fb7fec37_img0014" src="/cache/preview/0736782ca4b16a9b54dbadbfb431acb9.jpg" longdesc="/cache/preview/0736782ca4b16a9b54dbadbfb431acb9.jpg" alt="" width="178" height="240"></a>
        </li>
        <li style="">
          <a href="/images/galleries/Alice/personage/alice-16.jpg" rel="boxplus-sigplus_a2a6ac1031da3ed8b3d94984fb7fec37"><img id="sigplus_a2a6ac1031da3ed8b3d94984fb7fec37_img0015" src="/cache/preview/42b720b068c256839108a8baeccce599.jpg" longdesc="/cache/preview/42b720b068c256839108a8baeccce599.jpg" alt="" width="178" height="240"></a>
        </li>
        <li style="">
          <a href="/images/galleries/Alice/personage/alice-17.jpg" rel="boxplus-sigplus_a2a6ac1031da3ed8b3d94984fb7fec37"><img id="sigplus_a2a6ac1031da3ed8b3d94984fb7fec37_img0016" src="/cache/preview/0ecfbe7c8c82eaf3302a168b1d3aae56.jpg" longdesc="/cache/preview/0ecfbe7c8c82eaf3302a168b1d3aae56.jpg" alt="" width="178" height="240"></a>
        </li>
      </ul>
    </div>
    <div class="boxplus-paging">
      <div class="boxplus-prev" title="Предыдущий"></div><a class="boxplus-prev" href="javascript:void(0)">Предыдущий</a> <a class="boxplus-next" href="javascript:void(0)">Следующий</a>
      <div class="boxplus-next" title="Следующий"></div>
    </div>
  </div>
</div>

1
  • Подключите к коду ваш слайдер и добавьте изображения, чтобы была видна полная картина
    – Cheg
    Commented 28 июл. 2017 в 10:21

1 ответ 1

0

Хотел написать комментарий, но я тут недавно, поэтому такого права у меня еще нет, так что напишу тут.

Родительскому тегу задаешь

display: flex; и justify-content: stretch;

Первое свойство представляет твой контейнер как флекс-элемент, а второе указывает, что дочерние элементы родителя должны быть растянуты по его высоте.

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

background-size: cover;

которое пропорционально установит высоту и ширину блока.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.