中心图像和宽大的文字，允许两者在小宽度收缩？

Question

我有图片和文字。当布局比图像宽时，我需要将图像和文本居中，并使文本与图像一样宽。当布局较小时，我需要缩小图像和文本。

我的布局是响应式的，内容是动态的，因此图像的尺寸会发生变化。

第一部分可以通过以下方式实现：http://codepen.io/anon/pen/ZGyOmB

<div class="cont">
  <div class="cont2">
   <img src="http://www.vector-finder.com/site-images/too_big/fantasy_banner_vector.jpg" />
   <p>Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. </p>
   </div>
  </div>

.cont {
  text-align: center;
}
.cont2 {
  display: table;
  width: 1px;
  margin: auto;
}
p {
  display: inline-block;
}
img {
  //max-width: 100%;
}

然而，当我将图像设置为最大宽度为100％，因此它可以在较小的显示器上缩小，然后无论如何都会缩小。我知道这是因为应用于div.cont2的样式而发生的，但是当布局比图像宽时我需要这些样式。

还有其他解决方案吗？由于我的图像是动态内容，其宽度会有所不同，因此我无法使用具有任意断点的媒体查询。

Answer 1

这是简化的演示，经过测试，在 IE8 + ，Chrome和Firefox上运行良好。

<强> JsFiddle Demo

body {
    margin: 0; /* reset default margin */
}
div {
    display: table; /* shrink to fit content */
    margin: 0 auto; /* center the element */
    text-align: center; /* center the content inside */
}
img {
    width: 100%; /* maintain image width to be responsive */
    height: auto; /* maintain image aspect ratio */
}
p {
    display: table-caption; /* the magic part, shrink to fit */
    caption-side: bottom; /* place it to the bottom */
}

<div>
    <img src="http://i.imgur.com/iHaA1Yt.jpg" />
    <p>Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here.</p>
</div>

Answer 2

关键是让图像将此集display: inline-block的容器宽度定义到图像的容器（.cont2），然后让其余内容适合宽度（ .cont2），为此，您必须将position: relative设置为（.cont2）并将position: absolute设置为<p>，当然还需要将max-width: 100%设置为图像要有回应。

在你的情况下，它就像这样

＆＃13;

＆＃13;

.cont {
    text-align: center;
}
.cont2 {
    display: inline-block;
    position: relative;
    max-width: 100%;
}
img {
    max-width: 100%;
}
p{
    position: absolute;
}

＆＃13;

<div class="cont">
    <div class="cont2">
        <img src="http://www.vector-finder.com/site-images/too_big/fantasy_banner_vector.jpg" />
        <p>Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here.</p>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Here a jsfiddle to play with

Answer 3

请检查以下小提琴。

我希望这就是你想要的。

 .cont2 {
   display: table;
   margin: 0px auto;
   text-align: center;
 }
 .cont2 img {
   max-width: 100%;
   width: 100%;
 }
 p {
   padding: 5px 8px;
   caption-side: bottom;
   display: table-caption;
 }

<div class="cont">
  <div class="cont2">
    <img src="http://www.vector-finder.com/site-images/too_big/fantasy_banner_vector.jpg" />
    <p>Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here.</p>
  </div>
</div>

这是JSFIDDLE链接。

Answer 4

经过一番搜索，我发现了上一个关于SO的问题

Attribution Link

这似乎符合要求。

JSfiddle Demo

＆＃13;

＆＃13;

<div class="cont">
  <div class="cont2">
    <img src="http://www.vector-finder.com/site-images/too_big/fantasy_banner_vector.jpg" />
    <p>Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here.</p>
  </div>

＆＃13;

<div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

这在Chrome中完美运行，但在IE中完全没有。

http://codepen.io/anon/pen/ZGyOmB

<div class="cont2">
<img src="http://www.vector-finder.com/site-images/too_big/fantasy_banner_vector.jpg" />
<p>Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. </p>
</div>

.cont2 {
  display: table;
  margin: 0 auto;
}
p {
    display: table-caption;
  caption-side: bottom;
}
img {
  display: block;
  max-width: 100%;
}

Answer 6

我在IE上进行了一些实验和测试后创建了以下内容，它正如您所期望的那样正常工作。

http://jsfiddle.net/no3ootfp/

.cont2 {
    display: table;
    text-align: center;
    margin: auto;
}

.cont2 img {
    display: block;
    width: 100%;
}

.cont2 .text-wrap {
    display: table-caption;
    caption-side: bottom;
}

<div class="cont2">
    <img src="http://www.vector-finder.com/site-images/too_big/fantasy_banner_vector.jpg" />
    <div class="text-wrap">
        <p>Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. </p>
    </div>
</div>

Answer 7

此网址包含您想要的内容：http://jsbin.com/fikevo/edit?html,output

<强>标记：

<div class="cont2">
    <img src="http://www.vector-finder.com/site-images/too_big/fantasy_banner_vector.jpg" />
    <div class="text-wrap">
        <p>Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. </p>
    </div>
</div>

<强>样式：

.cont2 {
  display: table;
  text-align: center;
  margin: auto;
}

.cont2 img {
  display: block;
  width: 100%;
}

.cont2 .text-wrap {
  display: table-caption;
  caption-side: bottom;
}

Answer 8

＆＃13;

＆＃13;

    .cont {
        width: 512px;
        max-width: 100%;
        margin:0 auto;
    }

    img {
        width: 100%;
    }

＆＃13;

<div class="cont">
    <div class="cont2">
        <img src="http://www.vector-finder.com/site-images/too_big/fantasy_banner_vector.jpg" />
        <p>Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. </p>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;