防止文本扩展包装器

Question

我有一个包含图片和段落的DIV-wrapper (居中)：

我想做的是使包装器的宽度灵活，以便它可以适应图片的宽度。我用display:table实现了这一点(我还尝试了inline-block和width:fit-content；奇怪的是，最后一种方法不起作用)。

文本也非常适合这里，但是...！一旦文本变得比图片的宽度长，包装器就会扩展以适合文本，而不是适合图片(并破坏文本)。

这个问题有什么解决方案吗？

​

.image_wrapper {
    display:table;
    margin:25px auto 25px auto; /* centering wrapper on page */
    text-align:center;
    border: 1px solid red;
}

.image_wrapper img {
    height: auto;
    max-width:99%;
    border: 3px solid #31558e; 
}

.image_wrapper p {
    color:#84bddb;
    font-size: 13.3px;
    line-height: 15px;
    text-align: left;
    margin-left:0px;
}

<div class="image_wrapper">
  <img src="pic.jpg">
  <br>
  <p>Some text</p>
</div>

​

Answer 1

​

.wrapper {
  border: 1px solid red;
  display: table;
  width: 1%;
	margin: 0 auto;
}

.caption {
	text-align: center;
}

<div class="wrapper">
  <img src="http://via.placeholder.com/200/300">
  <p class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare dictum ligula quis dictum. Nam dictum, eros sit amet imperdiet aliquet, ligula nisl blandit lectus, quis malesuada nunc ipsum ac magna. Vestibulum in magna eu sem suscipit molestie.
    Maecenas a ligula molestie, volutpat turpis et, venenatis massa. Nam aliquam auctor lectus ac lacinia. Nam consequat lacus porta odio hendrerit mollis. Etiam at congue est, eu fermentum erat. Praesent vestibulum malesuada ante. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

​

Answer 2

你可以在没有jQuery的情况下使用figure/figcaption组合，但是，只有当页面上有一个figure/figcaption元素时，这种方法才有效。

将图形的高度设置为100%，将无花果标题的宽度设置为图像的宽度。这将在figure元素中包含所有文本，并允许高度扩展到文本的长度。

​

figure {
  display: table;
  margin: 25px auto 25px auto;
  /* centering wrapper on page */
  text-align: center;
  border: 1px solid red;
  height: 100%;
}

figcaption {
  color: #84bddb;
  font-size: 13.3px;
  line-height: 15px;
  text-align: left;
  margin-left: 0px;
  width: 100px;
}

<figure>
  <img src="http://via.placeholder.com/100x150" width="100">
  <br>
  <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nulla consequat, ullamcorper erat vitae, dictum leo. Phasellus semper, ante eget semper eleifend, tortor tortor facilisis quam, vitae convallis neque nunc non justo. Maecenas rhoncus
    ligula id velit consectetur, sed malesuada tellus pharetra. Nulla ac dolor at ex sodales tincidunt vitae gravida turpis. Etiam erat nunc, aliquet a ullamcorper eget, commodo et orci. In id urna sagittis ante viverra venenatis. Ut laoreet ligula vel
    orci placerat, at fringilla odio euismod. Etiam euismod eget ligula at dapibus. Sed vel bibendum nibh.</figcaption>
</figure>

​

我建议使用一些jQuery来计算宽度，以及具有不同大小的图像的多个div的情况。

​

$(document).ready(function() {

  $(".image_wrapper img").each(function(index, value) {
    var width = $(this).width();
    $(this).parent().children(".image_wrapper > p").css("width", width);
  })
});

.image_wrapper {
    display:table;
    margin:25px auto 25px auto; /* centering wrapper on page */
    text-align:center;
    border: 1px solid red;
}

.image_wrapper img {
    height: auto;
    max-width:99%;
    border: 3px solid #31558e; 
}

.image_wrapper p {
    color:#84bddb;
    font-size: 13.3px;
    line-height: 15px;
    text-align: left;
    margin-left:0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image_wrapper">
      <img src="http://via.placeholder.com/100x150">
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nulla consequat, ullamcorper erat vitae, dictum leo. Phasellus semper, ante eget semper eleifend, tortor tortor facilisis quam, vitae convallis neque nunc non justo. Maecenas rhoncus
    ligula id velit consectetur, sed malesuada tellus pharetra. Nulla ac dolor at ex sodales tincidunt vitae gravida turpis. Etiam erat nunc, aliquet a ullamcorper eget, commodo et orci. In id urna sagittis ante viverra venenatis. Ut laoreet ligula vel
    orci placerat, at fringilla odio euismod. Etiam euismod eget ligula at dapibus. Sed vel bibendum nibh.</p>
</div>

<div class="image_wrapper">
      <img src="http://via.placeholder.com/150x150">
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nulla consequat, ullamcorper erat vitae, dictum leo. Phasellus semper, ante eget semper eleifend, tortor tortor facilisis quam, vitae convallis neque nunc non justo. Maecenas rhoncus
    ligula id velit consectetur, sed malesuada tellus pharetra. Nulla ac dolor at ex sodales tincidunt vitae gravida turpis. Etiam erat nunc, aliquet a ullamcorper eget, commodo et orci. In id urna sagittis ante viverra venenatis. Ut laoreet ligula vel
    orci placerat, at fringilla odio euismod. Etiam euismod eget ligula at dapibus. Sed vel bibendum nibh.</p>
</div>

​

而且，如果你使用了figure/figcaption组合，你也不需要编写带有类的自定义div。

$(document).ready(function() {

  $(".myFigure img").each(function(index, value) {
    var width = $(this).width();
    $(this).parent().children(".myFigure > .myCaption").css("width", width);
  })
});

figure {
  display: table;
  margin: 25px auto 25px auto;
  /* centering wrapper on page */
  text-align: center;
  border: 1px solid red;
  height: 100%;
}

figcaption {
  color: #84bddb;
  font-size: 13.3px;
  line-height: 15px;
  text-align: left;
  margin-left: 0px;
  /*width: 100px;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure class="myFigure">
  <img src="http://via.placeholder.com/100x150" width="100">
  <br>
  <figcaption class="myCaption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nulla consequat, ullamcorper erat vitae, dictum leo. Phasellus semper, ante eget semper eleifend, tortor tortor facilisis quam, vitae convallis neque nunc non justo. Maecenas rhoncus
    ligula id velit consectetur, sed malesuada tellus pharetra. Nulla ac dolor at ex sodales tincidunt vitae gravida turpis. Etiam erat nunc, aliquet a ullamcorper eget, commodo et orci. In id urna sagittis ante viverra venenatis. Ut laoreet ligula vel
    orci placerat, at fringilla odio euismod. Etiam euismod eget ligula at dapibus. Sed vel bibendum nibh.</figcaption>
</figure>

<figure class="myFigure">
  <img src="http://via.placeholder.com/150x150">
  <br>
  <figcaption class="myCaption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nulla consequat, ullamcorper erat vitae, dictum leo. Phasellus semper, ante eget semper eleifend, tortor tortor facilisis quam, vitae convallis neque nunc non justo. Maecenas rhoncus
    ligula id velit consectetur, sed malesuada tellus pharetra. Nulla ac dolor at ex sodales tincidunt vitae gravida turpis. Etiam erat nunc, aliquet a ullamcorper eget, commodo et orci. In id urna sagittis ante viverra venenatis. Ut laoreet ligula vel
    orci placerat, at fringilla odio euismod. Etiam euismod eget ligula at dapibus. Sed vel bibendum nibh.</figcaption>
</figure>

​