Question

当屏幕宽度变小时，黄色<div>中的图像不会调整大小，我不知道原因。我该如何解决这个问题？

以下是JSFiddle和以下代码。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

只需设置正常的图像尺寸参数，如下所示：

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

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>

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

2 个答案: