PsyWhat PsyWhat - 4 years ago 201
CSS Question

css panel width match max text width

How do I make a whole floating panel width match maximum text width inside it?
It should be look like this:

Sample

pannel html is:



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





As you can see, the panel size matched the maximum image size, but I want the images to fit to the width of the elements.

Answer Source

The only way you can do this with pure css is to have all the images have the same aspect ratio - if this is the case then you can use a trick with absolute positioning and padding-top.

In the example below, I have used images with a ratio of 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>

If you are unable to have all the images have the same aspect ratio, then this is not possible with pure css and you would need a little js in order to resize the images - unless you go the background image route.

This is pretty much the same as the above but instead of absolutely positioning the images, you use a background image and cover (this will mean you have to choose an aspect ratio and all the mages will be the same size - may look better this way)

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

You will notice that in the above snippet, the second image looks like the other 2, even though it has a different aspect ratio to them

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download