CODEWITHSUNDEEP
htmlcss
Polo
Polo

Reputation: 159

table-cell adapt to image

I have this problem. I need that the yellow div adapts to the contained image; its width is dynamic, so I can't use a fixed width.

enter image description here

I can't find a solution anywhere, and I've tried with margin: 0; display:block; but nothing.

Here is the code:

HTML

<div class="columna" style="max-width: 100%;">
    <div class="s_container seleccion_simple_default">

        <div id="text_opcion">
            <div class="ti-ab-d"  style="display: table-cell;">
                <label for="test" ><p>Prueba</p></label>
            </div>
        </div>

        <div class="ssm_opcion img_opcion">
            <img src="images/opciones/mcdonalds.png">       
        </div>

    </div>
</div>

CSS

.s_container{
    margin: auto;
    width: 100%;
    height: 100%;
    border-spacing: 0px;
    overflow: hidden;
    border: none;
    position: inherit;
    display: table;
}

.ssm_opcion{
    width: 1px;
    max-width: 100%;
    overflow: hidden;
    display: table-cell;
    vertical-align: middle;
    background:yellow;

}

.img_opcion{
    display:;
    width: auto;
    max-width: 100%;
}

.ssm_opcion img{
    width: auto;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

#text_opcion{
    width: 100%;
    height:100%;
    min-width: 50px;
    text-align: left;
    display: table;
    float: left;
    background:green;
}

.ti-ab-d{
    vertical-align: bottom;
    text-align: right;
}


.s_container {
  margin: auto;
  width: 100%;
  height: 100%;
  border-spacing: 0px;
  overflow: hidden;
  border: none;
  position: inherit;
  display: table;
}
.ssm_opcion {
  width: 1px;
  max-width: 100%;
  overflow: hidden;
  display: table-cell;
  vertical-align: middle;
  background: yellow;
}
.img_opcion {
  display: ;
  width: auto;
  max-width: 100%;
}
.ssm_opcion img {
  width: auto;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
#text_opcion {
  width: 100%;
  height: 100%;
  min-width: 50px;
  text-align: left;
  display: table;
  float: left;
  background: green;
}
.ti-ab-d {
  vertical-align: bottom;
  text-align: right;
}
<div class="columna" style="max-width: 100%;">
  <div class="s_container seleccion_simple_default">

    <div id="text_opcion">
      <div class="ti-ab-d" style="display: table-cell;">
        <label for="test">
          <p>Prueba</p>
      </div>
    </div>

    <div class="ssm_opcion img_opcion">
      <img src="images/opciones/mcdonalds.png">
    </div>

  </div>
</div>

Upvotes: 1

Views: 92

Answers (2)

Gorbles
Gorbles

Reputation: 1168

You have some conflicting CSS in the snippets you provide, I've modified the code to remove the .img_opcion CSS you had in there. Image autosizes to the container nicely.

https://jsfiddle.net/Lvv7Lxrs/1/

EDIT: the width declaration is just to prove the container snaps to size, as the default "broken image" browser stand-in is a bit small.

Upvotes: 1

Mattew
Mattew

Reputation: 1

If you add a div and in the div you put a paragraph inside the div, if you give to div such rules css a background-color: #color, the div fits automatically to the paragraph, you don't must you do not have mandatory put a width-height fixed.

Upvotes: 0

Related Questions