将图片和文字居中放置在较大的宽度上，是否允许两者都缩小到较小的宽度？ [英] Center image and text at large width, allow both to shrink at small width?

问题描述

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

我的布局是自适应的，内容是动态的，因此图像的尺寸将改变。

可以通过以下方式实现第一部分： 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>此处是一些文本。一些文字在这里。一些文字在这里。一些文字在这里。一些文字在这里。一些文字在这里。一些文字在这里。一些文字在这里。一些文字在这里。一些文字在这里。一些文字在这里。一些文字在这里。一些文字在这里。一些文字在这里。一些文字在这里。一些文字在这里。一些文字在这里。 < / p> 
< / div> 
< / div> 
 
 .cont {
 text-align：center; 
} 
 .cont2 {
 display：table; 
宽度：1像素； 
保证金：自动； 
} 
 p {
 display：inline-block; 
} 
 img {
 //最大宽度：100％； 
} 
  

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

还有其他解决方案吗？由于我的图片是动态内容，其宽度会变化，因此我不能使用带有任意断点的媒体查询。

解决方案

这是简化的演示，已通过测试，可在 IE8 + ，Chrome和Firefox。

JsFiddle演示

< pre class = snippet-code-css lang-css prettyprint-override> body {margin：0; / *重置默认边距* /} div {display：table; / *缩小以适合内容* /边距：0自动； / *将元素居中* / text-align：center; / *将内容居中* /} img {宽度：100％; / *保持图像宽度敏感* / height：自动； / *维持图片的宽高比* /} p {display：table-caption; / *魔术部分，缩小以适合* / caption-side：bottom; / *将其放在底部* /}

 < div> < img src = http://i.imgur.com/iHaA1Yt.jpg /> < p>此处是一些文本。一些文字在这里。一些文字在这里。一些文字在这里。一些文字在这里。一些文字在这里。一些文字在这里。一些文字在这里。一些文字在这里。一些文字在这里。一些文字在这里。一些文字在这里。一些文字在这里。一些文字在这里。一些文字在这里。一些文字在这里。 < / p>< / div>  

I have an image and text. When the layout is wider than the image I need the image and text to be centered, and for the text to be as wide as the image. When the layout is smaller I need the image and text to shrink.

My layout is responsive and the content is dynamic so the dimensions of the image will change.

The first part can be achieved with this: 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%;
}

However when I set the image to have a max width of 100% so it can shrink at smaller displays, then it shrinks regardless. I know that this is happening because of the styles applied to div.cont2, but I need these styles for when the layout is wider than the image.

Is there another solution? As my image is dynamic content and its width will vary so I can't use a media query with an arbitrary break point.

解决方案

Here is the simplified demo, which has been tested and works great on IE8+, Chrome and 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>

这篇关于将图片和文字居中放置在较大的宽度上，是否允许两者都缩小到较小的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！