Swiper Отзывчивые изображения с текстом на верхней части изображения - PullRequest
Новая
       30

Swiper Отзывчивые изображения с текстом на верхней части изображения

0 голосов
/ 28 января 2019

Я использую Swiper для создания некоторых слайдеров изображений, и я пытаюсь заключить слайдеры в 2 контейнера flexbox, чтобы мои изображения были адаптивными.

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

Мне кажется, я имею дело с «проблемой» Flexbox, очень похожей на Почему гибкие элементы не уменьшаются до размера контента? , в этом случае родительский DIV сохраняет ширину исходного изображения.Проблема в том, что исправления в сообщении не работают, когда я обертываю изображение в <div class="img-wrapper">.На самом деле я потратил немало времени на исследования, и, похоже, ничто не заставляет его работать так, как я хочу.

Этот вопрос является ответвлением CSS object-fit: serve;сохраняет исходную ширину изображения в макете

ПРИМЕЧАНИЕ: откройте приведенный ниже фрагмент кода в новом окне, чтобы увидеть проблему.

enter image description here

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 1,
  spaceBetween: 50,
  // init: false,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});
img {
  object-fit: contain;
  min-width: 0;
  height: 100%;
  max-width: 100%;
}

.img-num {
  float: left;
  position: absolute;
  padding-left: 10px;
  text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
  color: white;
  font: 1.5em Georgia, serif;
}


.img-wrapper {
  border-style: solid;
  border-width: thin;
  height: 100%;
  object-fit: contain;
  min-width: 0;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.page {
  height: 100%;
  display: flex;
}

.main-container {
  flex: 1 1 0;
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.half-containers {
  flex: 0 1 50%;
  overflow: auto;
  box-sizing: border-box;
  border: 0.5px solid red;
  display: flex;
}

.page-header {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

.page-footer {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.css" rel="stylesheet" />
<div class="page">
  <div class="main-container">
    <div class="page-header">
      This is a header
    </div>
    <div class="half-containers">
      <!-- Swiper -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="img-wrapper">
              <div class="img-num">1</div>
              <img src='https://i.imgur.com/mSPw98T.jpg' />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="img-wrapper">
              <div class="img-num">2</div>
              <img src='https://i.imgur.com/mSPw98T.jpg' />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="half-containers">
      <!-- Swiper -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="img-wrapper">
              <div class="img-num">3</div>
              <img src='https://i.imgur.com/mSPw98T.jpg' />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="img-wrapper">
              <div class="img-num">4</div>
              <img src='https://i.imgur.com/mSPw98T.jpg' />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page-footer">
      This is a footer
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.js"></script>

1 Ответ

0 голосов
/ 28 января 2019

Во-первых, использование object-fit бесполезно, когда применяется к div, а не к изображению 1 .Даже использование этого в изображении в этом случае бесполезно, потому что изображение не искажается.object-fit применяется только в том случае, если соотношение потеряно, чтобы восстановить его.

Таким образом, у вас возникнет та же проблема без: 

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 1,
  spaceBetween: 50,
  // init: false,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});
img {
  height: 100%;
  max-width: 100%;
}

.img-num {
  float: left;
  position: absolute;
  padding-left: 10px;
  text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
  color: white;
  font: 1.5em Georgia, serif;
}


.img-wrapper {
  border-style: solid;
  border-width: thin;
  height: 100%;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.page {
  height: 100%;
  display: flex;
}

.main-container {
  flex: 1 1 0;
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.half-containers {
  flex: 0 1 50%;
  overflow: auto;
  box-sizing: border-box;
  border: 0.5px solid red;
  display: flex;
}

.page-header {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

.page-footer {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.css" rel="stylesheet" />
<div class="page">
  <div class="main-container">
    <div class="page-header">
      This is a header
    </div>
    <div class="half-containers">
      <!-- Swiper -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="img-wrapper">
              <div class="img-num">1</div>
              <img src='https://i.imgur.com/mSPw98T.jpg' />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="img-wrapper">
              <div class="img-num">2</div>
              <img src='https://i.imgur.com/mSPw98T.jpg' />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="half-containers">
      <!-- Swiper -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="img-wrapper">
              <div class="img-num">3</div>
              <img src='https://i.imgur.com/mSPw98T.jpg' />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="img-wrapper">
              <div class="img-num">4</div>
              <img src='https://i.imgur.com/mSPw98T.jpg' />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page-footer">
      This is a footer
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.js"></script>

Теперь проблема, с которой вы сталкиваетесь, заключается в том, что обертка изображения имеет первый размер с учетом ширины изображения, а затем изображение изменяется в этой обертке.Это как-то сложно, но если вы удалите height:100% с изображения, у вас будет это: 

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 1,
  spaceBetween: 50,
  // init: false,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});
img {
  /*height: 100%;*/
  max-width: 100%;
}

.img-num {
  float: left;
  position: absolute;
  padding-left: 10px;
  text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
  color: white;
  font: 1.5em Georgia, serif;
}


.img-wrapper {
  border-style: solid;
  border-width: thin;
  height: 100%;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.page {
  height: 100%;
  display: flex;
}

.main-container {
  flex: 1 1 0;
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.half-containers {
  flex: 0 1 50%;
  overflow: auto;
  box-sizing: border-box;
  border: 0.5px solid red;
  display: flex;
}

.page-header {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

.page-footer {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.css" rel="stylesheet" />
<div class="page">
  <div class="main-container">
    <div class="page-header">
      This is a header
    </div>
    <div class="half-containers">
      <!-- Swiper -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="img-wrapper">
              <div class="img-num">1</div>
              <img src='https://i.imgur.com/mSPw98T.jpg' />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="img-wrapper">
              <div class="img-num">2</div>
              <img src='https://i.imgur.com/mSPw98T.jpg' />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="half-containers">
      <!-- Swiper -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="img-wrapper">
              <div class="img-num">3</div>
              <img src='https://i.imgur.com/mSPw98T.jpg' />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="img-wrapper">
              <div class="img-num">4</div>
              <img src='https://i.imgur.com/mSPw98T.jpg' />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page-footer">
      This is a footer
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.js"></script>

Это на самом деле то, что вы хотите, учитывая ширину, но высота большая, поэтому изображение переполняется.Добавив height:100%, вы уменьшите высоту, а также ширину, поскольку изображение будет пытаться сохранить соотношение .Конечно, размер обёртки не будет снова изменён, потому что у него будет цикл, поэтому он застрянет в этом размере.

Простое решение - просто сделать обертку изображения position: absolute;.его высота уже определена как 100%, а его ширина будет уменьшаться, чтобы соответствовать ширине изображения.Нет необходимости настраивать top / left, потому что он уже отцентрирован без использования absolute, поэтому он будет оставаться в центре: 

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 1,
  spaceBetween: 50,
  // init: false,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});
img {
  height: 100%;
  max-width: 100%;
}

.img-num {
  top:0;
  left:0;
  position: absolute;
  padding-left: 10px;
  text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
  color: white;
  font: 1.5em Georgia, serif;
}


.img-wrapper {
  border-style: solid;
  border-width: thin;
  height: 100%;
  position: absolute;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.page {
  height: 100%;
  display: flex;
}

.main-container {
  flex: 1 1 0;
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.half-containers {
  flex: 0 1 50%;
  overflow: auto;
  box-sizing: border-box;
  border: 0.5px solid red;
  display: flex;
}

.page-header {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

.page-footer {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.css" rel="stylesheet" />
<div class="page">
  <div class="main-container">
    <div class="page-header">
      This is a header
    </div>
    <div class="half-containers">
      <!-- Swiper -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="img-wrapper">
              <div class="img-num">1</div>
              <img src='https://i.imgur.com/mSPw98T.jpg' />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="img-wrapper">
              <div class="img-num">2</div>
              <img src='https://i.imgur.com/mSPw98T.jpg' />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="half-containers">
      <!-- Swiper -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="img-wrapper">
              <div class="img-num">3</div>
              <img src='https://i.imgur.com/mSPw98T.jpg' />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="img-wrapper">
              <div class="img-num">4</div>
              <img src='https://i.imgur.com/mSPw98T.jpg' />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page-footer">
      This is a footer
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.js"></script>

1 Свойство object-fit определяет, как содержимое замененный элемент должен быть установлен в коробку, установленную по его используемой высоте и ширине. ref

Разделение не являетсязамененный элемент.Замененные элементы - это такие элементы, как canvas, img, iframe и т. Д. (https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements)

UPDATE

Вышеуказанное работает только для Chrome, поэтомуЯ хотел бы рассмотреть небольшой JS hack , чтобы исправить ширину элемента в других браузерах: 

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 1,
  spaceBetween: 50,
  // init: false,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});
$('.img-wrapper').each(function() {
  $(this).width($(this).find('img').width())
})
$( window ).resize(function() {
  $('.img-wrapper').each(function() {
    $(this).css('width','100%').width($(this).find('img').width())
  })
});
img {
  height: 100%;
  max-width: 100%;
  object-fit:cover;
}

.img-num {
  top:0;
  left:0;
  position: absolute;
  padding-left: 10px;
  text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
  color: white;
  font: 1.5em Georgia, serif;
}


.img-wrapper {
  border-style: solid;
  border-width: thin;
  height: 100%;
  position: absolute;
  max-width:100%;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.page {
  height: 100%;
  display: flex;
}

.main-container {
  flex: 1 1 0;
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.half-containers {
  flex: 0 1 50%;
  overflow: auto;
  box-sizing: border-box;
  border: 0.5px solid red;
  display: flex;
}

.page-header {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

.page-footer {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.css" rel="stylesheet" />
<div class="page">
  <div class="main-container">
    <div class="page-header">
      This is a header
    </div>
    <div class="half-containers">
      <!-- Swiper -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="img-wrapper">
              <div class="img-num">1</div>
              <img src='https://i.imgur.com/mSPw98T.jpg' />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="img-wrapper">
              <div class="img-num">2</div>
              <img src='https://i.imgur.com/mSPw98T.jpg' />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="half-containers">
      <!-- Swiper -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="img-wrapper">
              <div class="img-num">3</div>
              <img src='https://i.imgur.com/mSPw98T.jpg' />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="img-wrapper">
              <div class="img-num">4</div>
              <img src='https://i.imgur.com/mSPw98T.jpg' />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page-footer">
      This is a footer
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.js"></script>
...