如何在表格单元格中制作响应式图片？

Question

黄色<div>中的图像在屏幕宽度变小时不会自适应大小，我不知道如何解决。请问应该怎么做？

这里有一个JSFiddle链接和下面的代码。

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

- Polo

---

width+table-layout. 这是您要做的吗：https://jsfiddle.net/hwr1dukq/1/ - G-Cyrillus

是的，但我需要宽度是动态的，并适应实际图像的宽度。 - Polo

实际上，表格（显示或HTML）会自适应内容。您显然试图做相反的事情。像这样可能吗？https://jsfiddle.net/hwr1dukq/2/ - G-Cyrillus

但是不要调整图像大小。 - Polo

首先，您将图像的宽度设置为100％，因此它将适应父元素的50％宽度。然后，如果我有一个10x10的图像，它会变得更大，而我不想要这个。 - Polo

Answer 1

只需像这样设置普通图像大小参数：

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

- jsanchezs

Answer 2

我不确定是否可以用 table 来解决这个问题，但你可以使用嵌套的 flexbox 来实现你想要的布局。请查看演示和内联注释。 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>

- Stickers

---

太好了！你救了我。谢谢！ - Polo