以大宽度居中图像和文本，允许以小宽度缩小？ [复制]答案

【问题标题】：Center image and text at large width, allow both to shrink at small width? [duplicate]以大宽度居中图像和文本，允许以小宽度缩小？ [复制]
【发布时间】：2016-03-04 23:57:43
【问题描述】：

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

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

第一部分可以这样实现：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 的样式，但是当布局比图像更宽时，我需要这些样式。

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

【问题讨论】：

您要支持哪些浏览器？您的代码似乎在 Chrome 43 上运行良好。当窗口很大时，图像和文本的宽度恒定并居中，然后一旦窗口小于图片的宽度，它们就会缩小。
我需要支持IE，大概9+。
哦，好吧，我明白了。是的，它在 IE 11 中不起作用。

标签： css

【解决方案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>

【讨论】：

【解决方案2】：

关键是让图片把它容器的宽度定义为这个集合display: inline-block到图片的容器（.cont2），然后让剩下的内容适合（.cont2）的宽度，为此，您必须将 position: relative 设置为 (.cont2) 并将 position: absolute 设置为 <p>，当然还要将 max-width: 100% 设置为图像才能响应。

在你的情况下是这样的

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

<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>

Here a jsfiddle to play with

【讨论】：

这似乎确实有效，但绝对定位文本对我来说是危险的。内容是动态的，所以我不知道它的高度。

【解决方案3】：

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

Attribution Link

这似乎符合要求。

JSfiddle Demo

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

<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>

【讨论】：

这在 IE 中不起作用。在较小的宽度下，内容不会缩小。
该解决方案不适用于哪个版本的 IE？我只是看着它，看起来正在按要求工作。你能详细说明一下吗？

【解决方案4】：

这在 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%;
}

【讨论】：

你非常接近，你只需要将max-width:100% 更改为width:100% 就可以了，请参阅我的完整答案 - stackoverflow.com/a/30825157/483779

【解决方案5】：

请检查下面的小提琴。

我希望这是你想要的。

 .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 链接。

【讨论】：

虽然这在理论上可以回答这个问题，但演示显示结果的解决方案可能会更好。
那在更大的宽度上无法满足我的需求。文本变得比图像更宽。这基本上是我的问题的全部要点。

【解决方案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>

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案8】：

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

    img {
        width: 100%;
    }

<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>

【讨论】：