如何在不使用JavaScript的情况下将文本宽度与动态尺寸图像的宽度匹配？

Question

请参阅此代码笔： https://codepen.io/allen-houng/pen/XGMjMr?editors=1100#0

<div>
  <img src="https://res.cloudinary.com/djcpf0lmv/image/upload/v1549372650/Templates/yoga.jpg" data-radium="true" style=";">
  <div class="description">
    Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum   venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
  </div>
</div>

我有一个父div，其中有两个子div-图片和说明。我正在根据视口高度调整图像的大小，这意味着宽度将是动态的且响应迅速。如何在不使用JavaScript的情况下调整相应的同级div .description的大小以匹配图像的宽度？

换句话说，我该怎么做：

到此：

Answer 1

制作容器inline-block，然后将文本的宽度强制为0，以便容器的宽度由图像定义，然后再次使用100%迫使宽度为min-width

.parent {
  background: pink;
  display:inline-block;
}

img {
  display: block;
  max-height: 70vh;
}

.description {
  width:0;
  min-width:100%;
}

<div class="parent">
    <img src="https://res.cloudinary.com/djcpf0lmv/image/upload/v1549372650/Templates/yoga.jpg" data-radium="true" style=";">
  <div class="description">
    Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum   venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
  </div>
</div>

这里有一个相关的问题，可以更好地理解在这种情况下使用百分比的技巧：https://stackoverflow.com/a/54991250/8620333

---

另一个技巧是考虑图像的比例，您可以知道需要定义的宽度：

.parent {
  background: pink;
  display:inline-block;
}

img {
  display: block;
  max-height: 70vh;
}

.description {
  max-width:calc(70vh * 1.5);
}

<div class="parent">
    <img src="https://res.cloudinary.com/djcpf0lmv/image/upload/v1549372650/Templates/yoga.jpg" data-radium="true" style=";">
  <div class="description">
    Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum   venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
  </div>
</div>

Answer 2

flexbox示例

*{margin:0}
.img
{
  background: url(https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fih0.redbubble.net%2Fimage.236642016.7494%2Fap%2C550x550%2C12x16%2C1%2Ctransparent%2Ct.png&f=1);
  height: 100vh;
  background-size: cover;
  
}

<figure>
  <div class="img"></div>
  <figcaption>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo nulla et nunc mattis mollis. Donec ornare ornare nibh, tempor elementum magna molestie vitae. Donec posuere felis vitae sapien suscipit, vel ultricies justo feugiat. Pellentesque semper
    neque mi, eget venenatis turpis faucibus quis. Maecenas a odio odio. Etiam velit felis, tincidunt at feugiat sit amet, condimentum eget eros. Cras nec mauris non justo ullamcorper dignissim. Nullam vel nulla sit amet neque aliquet ullamcorper consectetur
    laoreet sapien. Etiam convallis est libero, et finibus tellus tempus id. Ut imperdiet vestibulum nisi id venenatis. In eget justo vel purus hendrerit congue eget eu ante. Suspendisse non erat eget nisl facilisis volutpat. In consequat est nec lacus
    fringilla, at varius tortor vehicula. Morbi dui arcu, efficitur nec sagittis vitae, vulputate eget leo.
  </figcaption>
</figure>

如果您只需要将图形的宽度设为100％，则有一个更简单的解决方案：

*{margin:0}

<figure>
  <img src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fih0.redbubble.net%2Fimage.236642016.7494%2Fap%2C550x550%2C12x16%2C1%2Ctransparent%2Ct.png&f=1" width="100%">
  <figcaption>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo nulla et nunc mattis mollis. Donec ornare ornare nibh, tempor elementum magna molestie vitae. Donec posuere felis vitae sapien suscipit, vel ultricies justo feugiat. Pellentesque semper
    neque mi, eget venenatis turpis faucibus quis. Maecenas a odio odio. Etiam velit felis, tincidunt at feugiat sit amet, condimentum eget eros. Cras nec mauris non justo ullamcorper dignissim. Nullam vel nulla sit amet neque aliquet ullamcorper consectetur
    laoreet sapien. Etiam convallis est libero, et finibus tellus tempus id. Ut imperdiet vestibulum nisi id venenatis. In eget justo vel purus hendrerit congue eget eu ante. Suspendisse non erat eget nisl facilisis volutpat. In consequat est nec lacus
    fringilla, at varius tortor vehicula. Morbi dui arcu, efficitur nec sagittis vitae, vulputate eget leo.
  </figcaption>
</figure>

如果要自动执行此操作，唯一的解决方案是使用javascript：

function changeFigureContent(figure)
{
  var width = figure.children('img').width();
  figure.children('figcaption').css('width', width)
}

window.addEventListener('load', function(){
  $('figure').each(function(k, v){
    changeFigureContent($(v));
  })
})

*{margin:0}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<figure>
  <img src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fih0.redbubble.net%2Fimage.236642016.7494%2Fap%2C550x550%2C12x16%2C1%2Ctransparent%2Ct.png&f=1">
  <figcaption>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo nulla et nunc mattis mollis. Donec ornare ornare nibh, tempor elementum magna molestie vitae. Donec posuere felis vitae sapien suscipit, vel ultricies justo feugiat. Pellentesque semper
    neque mi, eget venenatis turpis faucibus quis. Maecenas a odio odio. Etiam velit felis, tincidunt at feugiat sit amet, condimentum eget eros. Cras nec mauris non justo ullamcorper dignissim. Nullam vel nulla sit amet neque aliquet ullamcorper consectetur
    laoreet sapien. Etiam convallis est libero, et finibus tellus tempus id. Ut imperdiet vestibulum nisi id venenatis. In eget justo vel purus hendrerit congue eget eu ante. Suspendisse non erat eget nisl facilisis volutpat. In consequat est nec lacus
    fringilla, at varius tortor vehicula. Morbi dui arcu, efficitur nec sagittis vitae, vulputate eget leo.
  </figcaption>
</figure>

Answer 3

您可以简单地将图像上的宽度设置为100％。只需添加“宽度：100％；”放入img样式标签进行测试，如下所示：

<div>
  <img src="https://res.cloudinary.com/djcpf0lmv/image/upload/v1549372650/Templates/yoga.jpg" data-radium="true" style="width: 100%;">
  <div class="description">
    Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
  </div>
</div>

或将其设置为类：

.img-full {
  display: block;
  width: 100%;
}

<div>
  <img src="https://res.cloudinary.com/djcpf0lmv/image/upload/v1549372650/Templates/yoga.jpg" data-radium="true" class="img-full">
  <div class="description">
    Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
  </div>
</div>

“显示：块”仅确保您的img始终位于其自己的块中，而与宽度无关。也就是说，您的文字不会显示在旁边，而只会显示在文字下方或上方。