通过元素宽度定义图像高度

如何解决通过元素宽度定义图像高度

问题： 我目前正在尝试生成带有幻灯片的灯箱/模式，在我的情况下，我使用光滑的轮播幻灯片并使用 barba.js 生成内容。

幻灯片中的每个图像的高度必须为 100vh 减去 HTML 中的一些填充。但是我只能通过父 div 宽度来控制图像的高度，因为 js 轮播和我需要让它在一个宽度可控的模态中工作。

Wacko 解决方案： 如果我只有具有相同大小/纵横比的图像，那么类似的东西会起作用：

.content--detail {
  width: 100%;
  max-width: calc((100vh - 120px) / 1.6);
  height: auto;
  max-height: calc(100vh - 150px);
}

.content--detail img {
  width: 100%;
  height: auto;
}

我还尝试获取图像的纵横比并尝试以这种方式设置宽度：

$('.slider').on('afterChange',function(){
  var ratio = $('.slick-current').height() / $('.slick-current').width();
  $('.content--detail').css('maxWidth','calc((100vh - 120px) /' + ratio + ')');
});

但这也不合适，所以有人知道我如何才能做到这一点吗？ 是否有可能的公式来控制动态图像到视口高度到宽度？ 我没有想法，真的:)

非常感谢！

代码笔示例：https://codepen.io/qubism/pen/ExNgyyy

$(".splide").slick({
  lazyLoad: "ondemand",slidesToShow: 1,slidesToScroll: 1,infinite: false,adaptiveHeight: true
});

html,body {
  overflow: hidden;
  background: #ccc
}

.contrainer-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}

.content {
  font-size: 24px;
  line-height: 29px;
  color: #000;
  background: #fff;
  right: 320px;
  position: absolute;
  z-index: 101;
  overflow-x: auto;
  opacity: 1;
}

.content--detail {
  width: 100%;
  max-width: calc((100vh - 120px) / 1.7);
  height: auto;
  max-height: -webkit-calc(100vh - 150px);
  max-height: calc(100vh - 150px);
  max-height: 100%;
  top: 0;
  padding: 30px 30px 20px 30px;
  margin-left: auto;
  margin-right: auto;
}

.slick-slide img {
  width: 100%;
  height: auto;
}

.gallery-img__detail__desc * {
  font-size: 12px;
  line-height: 18px;
  padding-bottom: 0;
}

.slick-prev,.slick-next {
  font-size: 0;
  line-height: 0;
  color: transparent;
  width: 30%;
  height: 70%;
  top: 10%;
  transform: none;
  z-index: 9;
  display: none !important;
}

.slick-next:before {
  content: " ";
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1Ni4wMyAzNi42NyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOm5vbmU7c3Ryb2tlOiMxZDFkMWI7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjYuOTVweDt9PC9zdhlsZT48L2RlZnM+PGcgaWQ9IkViZW5lXzIiIGRhdGEtbmFtZT0iRWJlbmUgMiI+PGcgaWQ9IkViZW5lXzEtMiIgZGF0YS1uYW1lPSJFYmVuZSAxIj48bgluZSBjbGFzcz0iY2xzLTEiIHkxPSIxOC4zNCIgeDI9IjQ2LjY4IiB5Mj0iMTguMzQiLz48cG9seWxpbmUgY2xhc3M9ImNscy0xIiBwb2ludHM9IjM1LjYxIDIuNDMgNTEuMTcgMTguMzQgMzUuNjEgMzQuMjQiLz48L2c+PC9nPjwvc3ZnPg==") no-repeat;
  width: 50px;
  height: 50px;
  display: block;
  background-repeat: none;
  opacity: 0;
  float: right;
}

.slick-next:hover:before {
  opacity: 1;
}

.slick-next {
  right: -24px;
}

.slick-prev.slick-disabled:before,.slick-next.slick-disabled:before,.slick-prev.slick-disabled:hover:before,.slick-next.slick-disabled:hover:before {
  opacity: 0;
}

.slick-prev:before {
  content: " ";
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1Ni4wMyAzNi42NyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOm5vbmU7c3Ryb2tlOiMxZDFkMWI7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjYuOTVweDt9PC9zdhlsZT48L2RlZnM+PGcgaWQ9IkViZW5lXzIiIGRhdGEtbmFtZT0iRWJlbmUgMiI+PGcgaWQ9IkViZW5lXzEtMiIgZGF0YS1uYW1lPSJFYmVuZSAxIj48bgluZSBjbGFzcz0iY2xzLTEiIHkxPSIxOC4zNCIgeDI9IjQ2LjY4IiB5Mj0iMTguMzQiLz48cG9seWxpbmUgY2xhc3M9ImNscy0xIiBwb2ludHM9IjM1LjYxIDIuNDMgNTEuMTcgMTguMzQgMzUuNjEgMzQuMjQiLz48L2c+PC9nPjwvc3ZnPg==") no-repeat;
  width: 50px;
  height: 50px;
  display: block;
  background-repeat: none;
  transform: rotate(-180deg);
  margin-top: -25px;
  opacity: 0;
}

.slick-prev:hover:before {
  opacity: 1;
}

.slick-left {
  left: -24px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<section>
  <div class="container-wrap">
    <div class="content content--detail" data-title="" data-barba="container" data-barba-namespace="detail">
      <div class="splide">
        <div class='splide__slide'>
          <img src="https://via.placeholder.com/900x1600">
          <div class='gallery-img__detail__desc'>Description</div>
        </div>
        <div class='splide__slide'>
          <img src="https://via.placeholder.com/800x1300">
          <div class='gallery-img__detail__desc'>Description</div>
        </div>
        <div class='splide__slide'>
          <img src="https://via.placeholder.com/1000x1600">
          <div class='gallery-img__detail__desc'>Description</div>
        </div>
      </div>
    </div>
  </div>
</section>

TLDR;如何使用父级的宽度控制图像的高度？

解决方法

我并没有错。 它现在可以使用：

var ratio = $('.slick-current img').get(0).naturalHeight / $('.slick-current img').get(0).naturalWidth;
var elHeight = $(window).height() - 120;
$('.content--detail').css({ width: elHeight / ratio });