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

当屏幕宽度变小时，黄色<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>

来源

2016-01-19 Polo

宽度+表格的布局。这是你试图做的：https：//jsfiddle.net/hwr1dukq/1/ –

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

实际上，表（显示或HTML）适应以适应内容。你显然会尝试做相反的事情。这可能吗？ https://jsfiddle.net/hwr1dukq/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>

来源

2016-01-19 16:15:47 Stickers

大！你救了我。谢谢！ – Polo

只需设置正常的图像尺寸参数是这样的：

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

来源

2016-01-19 16:08:46 jsanchezs

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

回答

相关问题