css面板宽度匹配最大文本宽度

Question

如何使整个浮动面板的宽度与其中的最大文本宽度匹配？ 它应该是这样的：

面板 html 是：

.pannel{    
    width: auto;
    float: left;
    margin: 10px 10px 10px 0px;
    border: #88F 4px solid;
    padding: 10px;
    background-color: rgb(240,240,255);
    border-radius: 8px;
    font-size: 150%;
  }
.pannel>a>div
  {  
    width: auto;
    text-align: center;
    border: #AAF 1px solid;
    margin: 0 auto 0;
    overflow: hidden;
    border-radius: 9px;
    margin: 3px;
  }

<div class="pannel">
  <a href="someref1">
    <div>
     <img src="http://www.w3schools.com/css/img_fjords.jpg">
     <div>Some text</div>
    </div>
  </a>
  <a href="someref2">
    <div>
     <img src="https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067">
     <div>Some text2</div>
    </div>
  </a>
  <a href="someref3">
    <div>
     <img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg">
     <div>Text with a maximum width</div>
    </div>
  </a>
</div>

如您所见，面板尺寸与最大图像尺寸匹配，但我希望图像适合元素的宽度。

Answer 1

我不确定您是否要将图像作为整个内容，如果您愿意，请使用此代码

<style>
.pannel {
    width: auto;
    float: left;
    margin: 10px 10px 10px 0px;
    border: #88F 4px solid;
    padding: 10px;
    background-color: rgb(240, 240, 255);
    border-radius: 8px;
    font-size: 150%;
}

.pannel > a > div {
    width: auto;
    text-align: center;
    border: #AAF 1px solid;
    margin: 0 auto 0;
    overflow: hidden;
    border-radius: 9px;
    margin: 3px;
}

.pannel > a > div img {
    width: 100%;

}
</style>

和html代码

<div class="pannel">
<a href="someref1">
    <div>
        <img src="http://www.w3schools.com/css/img_fjords.jpg">

        <div>Some text</div>
    </div>
</a>
<a href="someref2">
    <div>
        <img
            src="https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067">

        <div>Some text2</div>
    </div>
</a>
<a href="someref3">
    <div>
        <img
            src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg">

        <div>Text with a maximum width</div>
    </div>
</a>
</div>

Answer 2

使用纯 css 的唯一方法是让所有图像具有相同的纵横比 - 如果是这种情况，那么您可以使用绝对定位和 padding-top 的技巧。

在下面的示例中，我使用了比例为 w:600px x h:400px (66.6666%) 的图像

.pannel {
  display: inline-block;
}

.pannel > a {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}

.image {
  display: block;
  position:relative;
  width:100%;
  padding-top:66.6666%; /* padding = height / width of image - 400px / 600px */
}

.image > img {
  position:absolute;
  left:0; 
  right:0;
  top:0; 
  max-width:100%;
  
}

<div class="pannel">
  <a href="someref1">
    <div class="inner">
      <div class="image">
        <img src="http://www.w3schools.com/css/img_fjords.jpg">
      </div>
      <div>Some text</div>
    </div>
  </a>
  <a href="someref2">
    <div class="inner">
      <div class="image">
        <img src="http://lorempixel.com/600/400/">
      </div>
      <div>Some text2</div>
    </div>
  </a>
  <a href="someref3">
    <div class="inner">
      <div class="image">
        <img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"> </div>
      <div>Text with a maximum width</div>
    </div>
  </a>
</div>

如果您无法让所有图像具有相同的纵横比，那么纯 css 无法做到这一点，您需要一点 js 来调整图像大小 - 除非您使用背景图像路线。

这与上面几乎相同，但不是绝对定位图像，而是使用背景图像和封面（这意味着您必须选择纵横比并且所有法师的大小都相同 - 可能看起来这样更好）

.pannel {
  display: inline-block;
}

.pannel > a {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}

.image {
  display: block;
  position:relative;
  width:100%;
  background-repeat:no-repeat;
  background-position:center center;
  background-size: cover;

  padding-top:66.6666%; /* for simplicity I have chose the same aspect ratio as above */
}

.image > img {
  position:absolute;
  left:0; 
  right:0;
  top:0; 
  max-width:100%;
  
}

<div class="pannel">
  <a href="someref1">
    <div class="inner">
      <div class="image"style="background-image:url(http://www.w3schools.com/css/img_fjords.jpg);"></div>
      <div>Some text</div>
    </div>
  </a>
  <a href="someref2">
    <div class="inner">
      <div class="image"style="background-image:url(https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067);"></div>
      <div>Some text2</div>
    </div>
  </a>
  <a href="someref3">
    <div class="inner">
      <div class="image"style="background-image:url(http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg);"></div>
      <div>Text with a maximum width</div>
    </div>
  </a>
</div>

你会注意到在上面的 sn-p 中，第二张图片看起来像另外两张，尽管它的纵横比不同