CODEWITHSUNDEEP
htmlcss
Polo
Polo

Reputation: 159

How to make responsive image in the table cell?

The image in the yellow <div> doesn't resize when the screen width gets smaller, and I don't know why. How can I fix that?

Here is a JSFiddle and the code below.

.s_container {
  margin: auto;
  width: 100%;
  height: 100%;
  border-spacing: 0px;
  overflow: hidden;
  border: none;
  display: table;
}
.ssm_opcion {
  display: table-cell;
  vertical-align: middle;
  background: yellow;
}
.ssm_opcion img {
  width: auto;
  height: auto;
  vertical-align: middle;
}
#text_opcion {
  width: 100%;
  height: 100%;
  min-width: 50px;
  display: table-cell;
  background: green;
}
.ti-ab-d {
  vertical-align: bottom;
  text-align: right;
}
<div class="s_container seleccion_simple_default">
  <div class="ssm_opcion">
    <img src="https://www.google.com.ar/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
  </div>
  <div id="text_opcion" class="ti-ab-d">Prueba</div>
</div>

Upvotes: 3

Views: 8931

Answers (2)

Stickers
Stickers

Reputation: 78676

I'm not sure if that can be fixed with table, but you can use nested flexbox to achieve the layout you want. See the demo and comments inline.

jsfiddle

.s_container {
  display: flex; /*flex*/
}
.ssm_opcion {
  background: yellow;
}
.ssm_opcion img {
  max-width: 100%;
  height: auto;
}
#text_opcion {
  background: green;
  flex: 1 0 50px; /*grow + no shrink + basis*/
  display: flex; /*flex*/
  justify-content: flex-end; /*horizontal right*/
  align-items: flex-end; /*vertical bottom*/
}
<div class="s_container seleccion_simple_default">
  <div class="ssm_opcion">
    <img src="https://www.google.com.ar/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
  </div>
  <div id="text_opcion" class="ti-ab-d">Prueba</div>
</div>

Upvotes: 1

jsanchezs
jsanchezs

Reputation: 2070

Just set the normal image size parameters like this :

max-width:100%;
max-height:100%;

Upvotes: 1

Related Questions