在图像顶部带有文本的滑动响应图像

【问题标题】：Swiper Responsive images with Text on top of image在图像顶部带有文本的滑动响应图像
【发布时间】：2019-06-21 00:44:17
【问题描述】：

我正在使用 Swiper 创建一些图像滑块，并且我试图将滑块包含在 2 个 flexbox 容器中，以便我的图像具有响应性。

我想在图像顶部添加一些文本，与图像的左上角对齐，这就是一切出错的地方。

我相信我正在处理与Why don't flex items shrink past content size? 非常相似的 Flexbox“问题”，在这种情况下，父 DIV 会保持原始图像的宽度。问题是一旦我将图像包装在<div class="img-wrapper"> 中，帖子中的修复似乎就不起作用了。事实上，我已经花了很多时间进行研究，但似乎没有什么能让它按我想要的方式工作。

这个问题是CSS object-fit: contain; is keeping original image width in layout 的一个分支

注意：在新窗口中打开以下代码 sn-p 以查看问题。

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>

【问题讨论】：

    标签： html css responsive-design flexbox swiper


    【解决方案1】：

    首先，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%，您将减少高度和宽度，因为the image will try to keep its ratio。当然，包装器不会再次调整大小，因为会有一个循环，因此它会停留在那个大小。

    一个简单的解决方法是简单地制作图像包装器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>

    1object-fit 属性指定替换元素的内容应如何适应由其使用高度建立的框，以及宽度。ref

    div 不是被替换的元素。替换的元素是 canvas、img、iframe 等元素 (https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements)

    更新

    以上似乎只适用于 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>

    【讨论】：

    • 谢谢，谢谢，谢谢。你让我大部分时间完成了我的项目的前端（我的技能很糟糕），然后回到完成后端工作的有趣部分！
    • 拍得好。看起来这在 FireFox 上不起作用...i.imgur.com/1u1WpQM.png
    • @dangel hmm ... 将尝试修复
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-01-01
    • 1970-01-01
    • 2021-11-22
    • 2020-09-10
    • 2013-10-14
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode